css 改变背景图的透明度

在CSS中改变背景图片的透明度有几种方法。一种方法是使用`opacity`属性，但是需要注意的是，使用`opacity`会使得背景图片和文字内容一起变透明。如果只想改变背景图片的透明度而保持文字内容的不透明，可以使用以下两种方法：

方法一是通过添加伪类选择器`:before`为背景添加透明效果。在`.demo1:before`这个选择器中，可以设置背景图片的透明度和模糊效果，而文字内容的样式则不受影响。例如：`.demo1:before { background: url(http://csssecrets.io/images/tiger.jpg) no-repeat; background-size: cover; width: 500px; height: 300px; content: ""; position: absolute; top: 0; left: 0; z-index: -1; -webkit-filter: blur(3px); filter: blur(3px); }`

方法二是通过在文字所在的div上设置背景的透明度，而不改变背景图片的透明度。在`.demo2`这个选择器中，可以设置背景颜色的透明度，而背景图片的透明度不会改变。例如：`.demo2 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 500px; height: 300px; line-height: 50px; text-align: center; background:rgba(255,255,255,0.3); }`

以上两种方法可以根据需求选择适合的方法来改变背景图片的透明度。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [css样式背景图片设置透明度,css如何设置背景图片的透明度](https://blog.csdn.net/weixin_45249263/article/details/124613875)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [关于CSS中背景图片透明度问题](https://blog.csdn.net/weixin_44758923/article/details/123290367)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]