背景图片设置透明度而不改变内容

2023-10-03 09:26| 来源: 网络整理| 查看: 265

想到透明度自然就想到了css的opacity: 0.5;但是如果就这样设置的话，会导致整个div所有内容都变成透明的。如下图：

那么如何实现只让背景图片透明呢？

1557200346335

方法一

弄一个透明的背景图片哈哈哈哈

方法二

把图片设置透明度（这是通过本地图片设置背景图片，详情参考设置背景图片），而整个div不设置

.item{ width: 90%; margin-left: 5%; margin-top: 20rpx; height: 200rpx; position: relative; overflow: hidden; border-radius: 10rpx; } .back{ width: 100%; position: absolute; z-index: -1; opacity: 0.2; } 方法三

这个方法和上面的差不多的意思，两个div一个设置透明度，总的不设置

ssssssadmn .container{ width: 100%; height: 600rpx; margin: 0; padding: 0; position: relative; } .bg{ width: 100%; height: 600rpx; position: absolute; background: url(https://note.youdao.com/yws/api/personal/file/6D19FC418F2A4693848568E9BFEE079F?method=download&shareKey=7c8b37fbf4504210dcbcd725f63bd85a); background-size: cover; opacity: 0.5 } 方法四

使用伪类before，设置背景透明度,

背景图 .demo1{ width: 500px; height: 300px; } .demo1:before{ background: url(http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg) no-repeat; background-size: cover; width: 500px; height: 300px; content: ""; /* 这个不要漏了 */ position: absolute; top: 0; left: 0; z-index: -1; /*-1 可以当背景*/ opacity: 0.5 }

【本文地址】

公司简介

联系我们