你的位置:首页 > 软件开发 > 网页设计 > 谈谈图片蒙版效果

谈谈图片蒙版效果

发布时间:2015-09-06 12:00:06
会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果。大家对-webkit-mask这一属性可能不太熟悉,或许 ...

谈谈图片蒙版效果

会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果。

大家对-webkit-mask这一属性可能不太熟悉,或许有很多人都是第一次见到,没错,这一属性也是还未被众多浏览器所支持的CSS属性,目前支持这一属性的仅有-webkit-前缀的谷歌及safari浏览器,但是相信在不久的未来这一属性将被其他主流浏览器所支持,下面我们来一睹为快。

首先介绍一下它的属性值,可以有两种写法(图片蒙版、渐变蒙版):

一、图片蒙版

.demo1 {  background : url("images/logo.png") no-repeat;  -webkit-mask : url("images/mask.png");}

原标题:谈谈图片蒙版效果

关键词:图片

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。