想到透明度自然就想到了css的opacity: 0.5;但是如果就这样设置的话，会导致整个div所有内容都变成透明的。如下图：
img
那么如何实现只让背景图片透明呢？
1557200346335
方法一
弄一个透明的背景图片哈哈哈哈
方法二
把图片设置透明度（这是通过本地图片设置背景图片，详情参考<a href="https://blog.csdn.net/qq_42002651/article/details/89460078">设置背景图片</a>），而整个div不设置
<view class='item'>
<image class='back' src='/images/mother.jpg'></image>
</view>
.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一个设置透明度，总的不设置
<view class="container">
<view class='bg'></view>
<!-- <image src='../image/1.jpg'></image> -->
<view class='up'>
ssssssadmn
</view>
</view>
.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，设置背景透明度,
<view class="demo1">背景图</view>
.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
}
