提供背景图像和不透明度

Question

我正在尝试为我的整页背景图像设置不透明度，但是当我添加不透明度代码时，我的整个 html 获得 0.4 的不透明度，除了图像。

html { 
  background: url(../img/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Source

我试过这样添加不透明度：

html { 
  background: url(../img/bg2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.4;
}

但正如我所说，我的整个 html 变成 0.4

我尝试在 background: url(../img/bg2.jpg) no-repeat center center fixed 0.4; 之后添加 0.4，但我的图像然后就变成空白了。

如何只将 0.4 添加到我的背景图像？

Answer 1

也为 body 设置 opacity，然后重试：

body {
   opacity : 1;
}

Answer 2

尝试使用 ::after 伪类：

html::after {
  content: "";
  background: url(../img/bg2.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
  background-size: cover;
  opacity: 0.4;  
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  z-index: -1;
}

Answer 3

在这些情况下，我在 body 标签上使用 :after 伪元素，以及一些绝对定位和不透明度属性：https://jsfiddle.net/kc0sf39r/

HTML:

<body>
  content
</body>

CSS:

body {
    background: url("http://digital-photography-school.com/wp-content/uploads/flickr/205125227_3f160763a0_o.jpg") no-repeat;
    width: 100%;
    height: 100vh;
    position: relative;
}
body:before {
    position: absolute;
    top: -99px;
    bottom: -99px;
    left: -99px;
    right: -99px;
    background-color: red;
    content: " ";
    opacity: 0.5;

}

提供背景图像和不透明度

giving background img an opacity

html

css

background-image

opacity