主要使用CSS3 filter(滤镜) 属性,代码如下:
wxml代码:
<view class="bg-group">
<view class="poster-bg" style="background-image:url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3000107020,2519435186&fm=26&gp=0.jpg');"></view>
<view class="image-wrap">
<image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3000107020,2519435186&fm=26&gp=0.jpg" mode="aspectFill" class="img" />
</view>
</view>
wxss代码:
.bg-group{
position: relative;
height: 360rpx;
overflow: hidden;
}
.poster-bg,.bg-group::after{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.bg-group::after{
content: '';
background-color: rgba(0,0,0, .3);
}
.poste