您的位置:首页 > 其它

mask-image使用方法及其优点

2017-03-14 22:20 197 查看
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图片 */
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息