微信小程序之CSS实现图片遮罩

实现半透明黑色遮罩

一：

• rgba(0,0,0,0.5)表示半透明黑色；
• 前三个值（红绿蓝）的范围为0到255之间的整数。
  第四个值，alpha值，制订了色彩的透明度/不透明度，0.5为半透明
• 图片高度不固定

mask和图片平级

<view class="banner">
	<view class="mask"> </view>
    <image class="img" src="{{info.cover}}"></image>
</view>

设置定位：

• 子绝父相
• 通过透明度实现
• 优先级高于图片

.banner {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.banner .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.banner .banner-img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

二：

• mask包含图片
• 图片高度固定

<view class="banner-mask" >
    <image class="banner-img" src="{{info.cover}}"></image>
</view>

• mask设置颜色
• 图片设置透明度

.banner .banner-mask {
  background: #000;
}
.banner .banner-img {
  width: 100%;
  height: 220rpx;
  opacity:0.5; filter: alpha(opacity=50);
}