注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

css3-mask(蒙版)  

2014-07-04 10:00:24|  分类: css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
何为蒙版:通俗的说,蒙版就是覆盖在图像上的一个新层,而通过对这个层的控制,让下面图像处于显示或者不显示,或者半透明的效果。类似于PS中的蒙版或lash中的遮罩层。
mask就是为一个元素添加蒙版


先看一下效果:需要两张图:
第一张图   red.png   用作蒙版
css3-mask(蒙版) - 云谦小记 - 云谦小记白色区域为透明
第二张图:11.png图片:
css3-mask(蒙版) - 云谦小记 - 云谦小记
使用mask之后效果:
css3-mask(蒙版) - 云谦小记 - 云谦小记
有点意思;从效果可以看出来,只有蒙版下面的背显示出来,蒙版以外的没有被显示。怎么实现的呢?不急,很简单。
先来看一下先关的属性:

-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
-webkit-mask-position:x y;
-webkit-mask-clip:border | padding | content
-webkit-mask-origin:border | padding | content 

 我们来看一下上面的效果是怎么实现的呢?
html

<img src="11.png" alt="">

css

img{
-webkit-mask-image:url(black.png);
-webkit-mask-position:50% 50%;
-webkit-mask-repeat:no-repeat;
}

另外我们还可以添加渐变蒙版,具体怎么操作呢,我们把上一个效果的css改为

-webkit-mask-image:-webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.6) 100%);

效果:
css3-mask(蒙版) - 云谦小记 - 云谦小记
 注意:
1、形状主要控制的是显示区域,我们蒙版是什么形状就显示什么形状
2、蒙版的颜色对显示没有任何影响,我们用的是红的,换成黑色,也没有什么影响
3、透明度为显示图像的透明度,而不是蒙版的透明度
  评论这张
 
阅读(30)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017