目前来看兼容性还是不错的!
==============================================================
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
上面这几个属性呢background-image的相关属性用法差不多,所以某些属性在本文中就不赘述了,想学习的童鞋,请移步主页查看。
====================================================================
none;
没有图片,设置了这个属性,其他的mask-* 属性自然没有用处了
url(jpg/png/svg);
这里我们看一下svg的效果
首先再阿里iconfont上复制一个svg 保存为mk.svg
然后来使用它:
#masked {
width: 200px;
height: 200px;
background-color: #8cffa0;
-webkit-mask-image: url(./mk.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-origin:content-box;
border: 10px solid #000;
}
这里我们开始来分析:
首先:大家看到的淡黄色的边框是鼠标审查元素看到的,真正的是下面这样,并没有边框的
首先我们定义了背景颜色,淡绿色,mask是上面的svg,mask的起始位置是内容区域,最后定义了一个边框,最后从效果图中我们可以得出一下结论
1. mask-image 是对整个元素生效的(包括border)
2. mask-image 是mask透明背景显示,mask不透明背景看不见
3. 我们是无法看到mask本身的内容的,只能看到背景的内容。
渐变
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent 50%);
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
image(url(mask.png), skyblue);
在最新版的谷歌和火狐中均无法识别。
效果如下:
实现逻辑:
首先是一张作为背景图片的人物照
一个黑色的图片作为mask
使用动画来控制黑色mask的位置,就可以实现