拒绝访问 | www.colabug.com | 百度云加速
请打开cookies.
此网站 (www.colabug.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(4495863cba6543e3-ua98).
重新安装浏览器，或使用别的浏览器如图所示，我们需要将左边的图片展示为右边的图片效果，即为图片添加一层黑色的蒙版
要实现当前效果，我们需要在img外面加一层div&div class="dimback"&
&img src="#" class="dim"/&
&/div&并将div的背景颜色设置为黑色，并为img元素设置不透明度.dim{
opacity:0.6; filter: alpha(opacity=60);
background: #000;
}此时我们就可以实现我们需要的效果了
前端页面如何为图片添加黑色半透明遮罩
div+css实现图片底部透明遮罩文字标题
css 实现蒙版效果
详解如何给背景图片加颜色遮罩
css3的新属性遮罩蒙版mask
CSS3 遮罩蒙版效果 分栏效果
CSS3为图片增加蒙版
没有更多推荐了，CSS&半透明层（做遮罩层用）
&meta charset="utf-8"&
&title&半透明（用在遮罩层）&/title&
&style type="text/css"&
&*{ margin:0; padding:0;}
&#maskLayer{ width:100%; height:900
background-color:#000000; opacity:0.5;
-moz-opacity:0.5; filter:alpha(opacity=50);}
id="maskLayer"&遮罩层&/div&
&/html&&&&&&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。Css3制作鼠标悬停图片遮罩层效果
下载资源()次
阅读次数()次
发布时间：
用法简介：
Css3制作鼠标悬停图片遮罩层效果包含5个页面事例代码，不错的一款鼠标悬停特效，xw素材网推荐大家下载
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。H5案例分享：特殊形状图片之遮罩蒙版CSS3-Mask效果_H5案例分享
H5案例分享：特殊形状图片之遮罩蒙版CSS3-Mask效果
特殊形状图片之遮罩蒙版CSS3-Mask效果
& &小五最近做的项目，需要一个小效果，就是获取用户头像以心形的形状展现在页面上，开始小五想的实现方式是canvas画图或CSS3的clip（剪切），发现都不理想，和设计稿里的图形美观度相差太大，而且实现起来太麻烦，后来，小五采用了一个CSS3的新增属性完美的解决了这个问题，今天就来和大家分享一下。
& &首先来解释一下遮罩、蒙版：和PS中的蒙版、Flash中的遮罩层很类似
遮罩：为了得到特殊的显示效果，可以在遮罩层上创建一个任意形状的&视窗&，遮罩层下方的对象可以通过该&视窗&显示出来，而&视窗&之外的对象将不会显示。mask便是创建这样一个遮罩层。
一、Mask 的兼容性
& &以下是来自&&的统计：
& &ie/edge 全面不支持，Android 和 iOS Safari 阵营几乎全线飘浅绿，意味着支持部分功能 。不过，Android 4.0 及以下版本的对&mask&的兼容性并不友好！多亏了近几年智能手机市场的良性竞争，给移动前端制造了一个相对良好的环境，经小五亲测，主流机型基本上都支持这个属性了。
二、Mask 的原理
& 蒙板可以是 CSS3 渐变或者半透明的PNG图片，蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。如下：
三、mask 的属性
-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
-webkit-mask-position:
-webkit-mask-clip:border | padding | content
-webkit-mask-origin:border | padding | content
&& PS：mask 的语法与 background 是相仿的。
& 原素材：
& ① 心形图片实现
&img src="images/img.jpg"/&
width: 300
height: 256
left: 50%;
margin-left: -150
margin-top: -128
-webkit-mask-image:url(images/mask1.png);
& ② 渐变图片实现
&img src="images/img.jpg"/&
width: 300
height: 256
left: 50%;
margin-left: -150
margin-top: -128
-webkit-mask-image:url(images/mask2.png);
& 或者是将渐变以代码的形式进行设置
width: 300
height: 256
left: 50%;
margin-left: -150
margin-top: -128
-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
& 效果呈现：
& &好啦，至此CSS3遮罩蒙版效果讲完了，想生成多姿多彩图案的小伙伴快快试试吧~~~
以上为“H5案例分享”团队原创文章，转载请注明出处！
分享到微信朋友圈x
打开微信，点击底部的“发现”，使用“扫一扫”即可将网页分享至朋友圈。
相关推荐：
微信扫一扫关注该公众号
微信极速登录/注册
Copyright (C)
Jiandou Technology Co.,Ltd. All Rights Reserved.
北京简豆科技有限公司版权所有 京ICP备号-2
对汉语支持不错，别对小五说英文
微信公众号
通过H5案例提交小助手(微信小程序)
微信扫描下方二维码进入,进行投稿
在电脑端，进入H5案例发布界面，自己编写
请pc端输入网址"h5anli.com"下载截图压缩包~
标签已提交成功小编正在审核请等待一下下啦
哎呀标签已存在换个新的呗~}