想到透明度自然就想到了css的opacity: 0.5;但是如果就這樣設(shè)置的話，會導(dǎo)致整個div所有內(nèi)容都變成透明的胸梆。如下圖：
img
那么如何實現(xiàn)只讓背景圖片透明呢踊谋？
1557200346335
方法一
弄一個透明的背景圖片哈哈哈哈
方法二
把圖片設(shè)置透明度（這是通過本地圖片設(shè)置背景圖片护赊，詳情參考<a >設(shè)置背景圖片</a>）给赞，而整個div不設(shè)置
<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一個設(shè)置透明度蓬坡，總的不設(shè)置
<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猿棉，設(shè)置背景透明度,
<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 可以當(dāng)背景*/
opacity: 0.5
}
