html照片属性可以设置不透明度,我可以仅对div的背景图像设置不透明度吗？

小编典典

不，这无法完成，因为opacity会影响整个元素(包括其内容)，并且无法更改此行为。您可以使用以下两种方法解决此问题。

Secondary div

将另一个div元素添加到容器中以保留背景。这是跨浏览器最友好的方法，即使在IE6上也可以使用。

的HTML

Hi there

CSS

.myDiv {

position: relative;

z-index: 1;

}

.myDiv .bg {

position: absolute;

z-index: -1;

top: 0;

bottom: 0;

left: 0;

right: 0;

background: url(test.jpg) center center;

opacity: .4;

width: 100%;

height: 100%;

}

：before和:: before伪元素

另一个技巧是使用CSS 2.1 :before或CSS3::before伪元素。:beforeIE从版本8开始支持伪元素，而::before完全不支持伪元素。希望它将在版本10中得到纠正。

HTML

Hi there

CSS

.myDiv {

position: relative;

z-index: 1;

}

.myDiv:before {

content: "";

position: absolute;

z-index: -1;

top: 0;

bottom: 0;

left: 0;

right: 0;

background: url(test.jpg) center center;

opacity: .4;

}

补充笔记

由于您的行为，z-index您将必须为容器设置z-index以及为z-index背景图像设置负值。

2020-05-10