mask-image使用方法及其优点

email:gm4linus at gmail  dot com

mask-image是一个很新的东西,因为新所以支持它的浏览器就少,但是它很好用,该属性现在仅仅被webkit以私有属性支持。最新支持情况可查阅http://caniuse.sinaapp.com/html/item/css-masks/index.html

一般来说mask-image需要一张有透明部分的图片,该图片用于遮挡在指定的dom上,被图片透明部分遮住的部分将不被显示,被不透明部分遮住的部分将显示。显示的是背景图片或者背景色。也就说我们只要一张图片即可显示不同颜色效果。

用法举例:

.mask-image{
	width: 517px;
	height: 200px;
	-webkit-mask-size: 517px 200px; /* mask-image的大小 */
	background-color: #000;
	background-image: url("google.jpg");
	-webkit-mask-image: url("apple.png"); /* 指定mask-image图片 */
}

今天写了另一篇文章《为什么使用@font-face》( http://blog.csdn.net/notejs/article/details/17318809)中讲自定义字体在做icon的优势,我想mask-image也在一定程度上有做icon的优势,比如随意指定icon的颜色和大小。Sencha Touch2.1版本中使用mask-image来做icon,但是因2.2版本支持了非webkit浏览器,所以改为了自定义字体实现。


如下是一个用mask-image实现的例子。

背景图是某一天google涂鸦,mask-image为一个白色的苹果,其他部分为透明如,如下图,需要仔细看,还是可以看出苹果轮廓的。


在线的示例可以查看http://caniuse.sinaapp.com/html/demos/css-masks/index.html。这是一个使用东方财富的logo做了maskimage示例。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值