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位置相对并使用之前使用相同的图像并在相同的不透明度之前给出。你可以在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背景不透明度不影响前景

2 个答案: