HTML 背景不透明度不影响前景

Question

我有一张不透明度为 .4 的背景图片。我在它前面有一个图像，它似乎具有相同的不透明度。我该怎么做才能使正面图像的不透明度为 1.0？

这是一个 jsfiddle。

http://jsfiddle.net/aaronmk2/6zjtgxdm/150/

这是我的 html

<div>Hello World

<img src="http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg" alt="">
</div>

和我的css

div{
    width : auto;
    height : 1000px;
    background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
    background-position:  65% 65%;
  background-repeat:   no-repeat;
  background-size:     cover;
  opacity: .4;
}

Answer 1

您可以给 div 相对位置并在相同图像上使用 before 并给 before 相同的不透明度。您可以在 jsfiddle 中检查下面给定的代码。

/* Here is the code Start */
div{
    width : auto;
    height : 1000px;
    position:relative;
}
div:before{
  content:" ";
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
  background-position:  65% 65%;
  background-repeat:   no-repeat;
  background-size:     cover;
  opacity: 0.4;
}
/* Here is the code Start */

Answer 2

我找到了解决办法。您需要将背景图片放在 div::after 伪元素中，如下所示：

div{
    width : auto;
    height : 1000px;
}

div::after {
  content: "";
  background-image : url("http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg");
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
  background-position:  65% 65%;
  background-repeat:   no-repeat;
  background-size:     cover;
}

像这样，div 元素没有透明的不透明度，它以前应用于其子元素图像。

I updated your fiddle

HTML 背景不透明度不影响前景

HTML background opacity no to affect the foreground

html

css

opacity