有这样一个需求，便是在一个DIV中包含有一个Image标签，但是在Div标签中包含有一张背景图片，设计图上的样子是这张背景图片是有一个透明度的，但是如果直策应用opacity属性设置的的话就会连Div中的内容的透明度也会受到影响，那么我们如何在HTML中设置div背景图片的透明度呢？，可以通过以下几种方法实现。
方法一：利用伪元素这是在日常开拓中被推举利用的方法，通过这种办法实现不会影响到div中的其他内容的透明度只会影响它自己背景的透明度，详细实现如下。
<!DOCTYPE html><html><head> <style> .container { position: relative; width: 300px; height: 200px; overflow: hidden; } .container::before { content: ""; background-image: url('your-image.jpg'); background-size: cover; background-position: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.5; / 调度透明度 / z-index: 1; } .content { position: relative; z-index: 2; color: white; } </style></head><body> <div class="container"> <div class="content"> 这里是内容 </div> </div></body></html>方法二：利用RGBA颜色叠加
这种办法比较适宜那种须要给背景图片上添加蒙版的情形，但是笔者考试测验的时候，结果实在是不尽人意。以是还是选择了上面的推举行法，不过这种办法要比上面的那种办法实现起来要大略很多。如下所示。
<!DOCTYPE html><html><head> <style> .container { width: 300px; height: 200px; background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center; background-size: cover; } </style></head><body> <div class="container"> 这里是内容 </div></body></html>方法三：利用CSS滤镜
这种办法实现会影响到全体的div的样式，也便是说页面中的内容的透明度也会受到影响，并且这种影响不会被其他样式所改变。如下所示。
<!DOCTYPE html><html><head> <style> .container { width: 300px; height: 200px; background: url('your-image.jpg') no-repeat center center; background-size: cover; filter: opacity(0.5); / 调度透明度 / } </style></head><body> <div class="container"> 这里是内容 </div></body></html>
以上便是实现如何调度div的背景透明度，在一些分外场景中我们还可以通过JS的办法来实现。上面的方法中，推举利用的是伪元素方法，由于它在修正了div背景透明度之后，并不会影响到其他的元素，RGBA色彩添加则是局限于一些色彩华美的地方利用，而对付一些单色调的内容来讲这种办法实现效果不是太好。通过CSS过滤样式，虽然是最直接的办法，但是如果在div内部有内容的情形下会影响到全体组件体系的样式。
在实际开拓中，我们可以选择得当的办法来实现这个需求。当然还有其他的实现办法，有兴趣的读者可以留言我们一起谈论。
