微信小程序之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);
}

微信小程序之CSS实现图片遮罩相关推荐

微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
微信小程序：多功能图片处理器
这是一款多功能的一款照片处理器 UI简洁,功能也还不错免除服务器和域名即可搭建,特别的简单好上手一键化功能支持: 人脸融合(人脸融合,两张脸融合成一张) 换底色(相当于就是给照片的底色换色,一般都 ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序点击放大图片
微信小程序点击放大图片在做微信小程序的时候遇到了这个点击放大的事件,这里记录一下 checkmap:function(e){var imageurl=this.data.mapimagesrc;co ...
微信小程序实现PDF转图片（java spring实现）
微信小程序实现PDF转图片前后端(两种方式) 1.前端传PDF的url地址至后端 1.1前端 1.2后端 2.前端传PDF文件至后端 2.1前端 2.2后端 1.前端传PDF的url地址至后端 1.1 ...
微信小程序系列——点击图片放大预览
需求开发的时候,把图片放到页面上,点击图片没有任何反应,不能放大也不能缩小这怎么能行!!! 所以需求来了:点击图片能够把图片弹出来,这样就能放大图片看细节了! 实现步骤微信提供了预览图片的接口, ...

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

实现半透明黑色遮罩

微信小程序之CSS实现图片遮罩相关推荐

最新文章

热门文章