前端页面如何为图片添加黑色半透明遮罩

在实际开发中经常会遇到对图片加一层半透明遮罩，然后上面显示文字说明的需求。
如下图：

如何实现呢？看代码！
需要把图片放到一个父容器中，为父容器设置背景色为黑色background: #000;，再为图片本身添加一层线性渐变蒙版-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,0.5));。

<view class='lunboImage'><image src='{{item}}'></image></view>

重点是样式文件：


.lunboImage {background: #000;width: 100%;height: 100%;margin: 0 10rpx;justify-content: center;}
.lunboImage image{width: 100%;height: 100%;margin: auto;-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,0.5));
}

很easy吧~

关于
-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,0.5));
稍微说明一下。。。

-webkit-mask:-webkit-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,0.5))

线性渐变蒙版：-webkit-linear-gradient(方向、起始颜色…终止颜色)
方向有top,bottom,left,right分别表示从上往下，从下往上，从左往右，从右往左。
起始颜色和终止颜色中间可以加很多颜色，作为中间色。

好啦，就是这样啦~
这是我在微信小程序的项目中遇到的，也属于前端页面css样式的知识点吧。

前端页面如何为图片添加黑色半透明遮罩相关推荐

css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法
作为一个刚接触html和css的小白,总会遇到一些细节问题,在这里写下一个我遇到的小问题的解决方法,方便今后加深理解,更高效地学习. 一般情况下,让一个图片有超链接,可以用a标签把 img包住,但是要 ...
《音视频：给图片添加黑色边框》
目录一.前言二.libjpeg-turbo解码jpeg图片三.Yuv420编码格式四.生成目标形式五.libjpeg-turbo编码yuv生成jpeg 一.前言本文旨在给一个jpg图片添加 ...
如何给图片添加黑色边框
有时候图片有了黑色边框才能与相近的背景区分开,这个时候给图片添加边框就是必须的了. 你好这位朋友!很简单,要这样操作: 将照片打开,裁切好后,应用工具箱中的矩形选择工具,在照片图像内单击右键,在弹出的 ...
前端页面img标签图片显示发生错误或者没有图片都显示默认的图片
<img src="${sessionScope.user.thumbImg}" class="eval-self-photo" alt="&q ...
iphone app 的图标上被自动添加一层半透明遮罩(玻璃效果)，小米3这样的高分屏icon不生效，怎么破?
ios/info.plist 添加一行: Icon already includes gloss effects = YES 意思就是告诉苹果我提供的图标已经自带玻璃效果了,不用你添加一层遮罩了! 有 ...
jsPdf+html2Canvas+react实现前端页面导出pdf，并解决jspdf分页图片过长截断问题
第一步在utils下面创建一个工具文件exportPDF.js 以下每一句代码都有对应的注释,并且针对不同情况,作出了相应的解释,如果有需要的话,请耐心看完. import html2Canvas ...
为图片添加半透明遮罩效果
平时为图片添加半透明遮罩效果,我的做法如下: 利用标签i实现背景半透明遮罩.当鼠标hover时, 提高i的背景色透明度值background-color: rgba(0, 0, 0, .6) < ...
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询）
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码(前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询修改密 ...
html背景图片半透明遮罩,BufferedImage在图片添加半透明遮罩层
利用BufferedImage处理图片时,例如生成海报往添加图片加文字,由于背景图颜色差异不统一,需要加入纯色半透明遮罩层后,再往上面添加文字. 以下代码演示:在图片底部加入一条高度20的半透明遮罩层 ...

前端页面如何为图片添加黑色半透明遮罩

前端页面如何为图片添加黑色半透明遮罩相关推荐

最新文章

热门文章