Question

我创建了一个HTML页面。我的页面中有一个背景图片。我想改变背景的不透明度即背景中使用的图像的不透明度。我正在使用此代码将背景图像添加到我的页面：

<!DOCTYPE html>
<html>
<head>
    <style>
    body{background-image: url('IMG_18072014_115640.png')}
    </style>
</head>

    <h1>Hello world!</h1>
    <body>The background image will be shown behind this text.</body>

</html>

如何更改此代码以更改此背景图像的不透明度。

Answer 1

将background-image应用于body的{{1}}：pseudo-element并更改其:after，以便opacity的内容不受影响。

body

body, html {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
}
body:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://www.lorempixel.com/600/400);
  opacity: 0.3;
  z-index: -1;
}

Answer 2

我认为你误解了html中的一些内容，

但一个简单的解决方案是制作透明的背景图像......（PNG24透明度）

Answer 3

尝试这种方法来更改psudo element的不透明度：DEMO

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(http://s.hswstatic.com/gif/evil-robots-3b.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

在HTML中更改背景图像的不透明度

3 个答案: