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

我有一张背景图片，上面有不透明度。我有一个图像在它前面，似乎有相同的不透明性。如何使前图像的不透明度为1.0

这是一个jsfiddle

这是我的html

<div>Hello World

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

---

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

/* 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 */

---

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

/* 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 */

---

我找到了解决办法。您需要将背景图像放在

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

元素没有透明的不透明度，这以前应用于其子元素image

---

我找到了解决办法。您需要将背景图像放在

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

元素没有透明的不透明度，这以前应用于其子元素image

请参见