CSS:mask之使用渐变背景做遮罩

CSS渐变背景至少需要两种颜色参与，当我们设置其中一种颜色为透明色（transparent），便可实现mask用透明色遮挡元素背景的遮罩功能。下面我们先以径向渐变做个示范：

/* css代码 */
.mybox {
	width: 450px;
	height: 300px;
	background: url('背景图片地址') no-repeat center/cover;
	-webkit-mask: radial-gradient(circle at 60% center, black 40%, transparent 50%, transparent 0);
}

<!-- HTML代码 -->
<div class="mybox"></div>

在 mask 属性中，我们使用径向渐变 radial-gradient 设置同等于遮罩位图的效果，该径向渐变是个圆形（circle），圆心在 60% center 坐标处，颜色设两种（黑色和透明色）、三个渐变子项，它们都有百分比规定颜色的作用范围：黑色 40%，第一个透明色 50%，第二个透明色到结束位置，黑色到第一个透明色之所以这么设置，是为了让颜色的过渡有个缓变区间，40%~50%的地带是渐变的，这样能让颜色过渡不突兀（否则边缘会出现过大的过渡区间或锯齿）。黑色在径向渐变圆的中心，向四周发散到40%处开始过渡为透明，到50%处为全透明，如此，黑色部分遮罩下的底图得以呈现，透明部分遮罩的被剪裁掉，显示出来的圆形底图的边缘是慢慢过渡为透明的，整体看上去有立体圆球的感觉。

我们再以线性渐变做一个示范：让两张堆叠在一起的图片融合为一个整体。

/* css代码 */
.mybox1 {
	position: relative;
	width: 450px;
	height: 300px;
	background: url('图片地址一') no-repeat center/cover;
}
.mybox1::before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	background: url('图片地址二') no-repeat center/cover;
	-webkit-mask: linear-gradient(to right, red 50%, transparent 60%, transparent 0);
}

<!-- HTML代码 -->
<div class="mybox1"></div>

相同尺寸的宿主元素和伪元素，宿主元素会被伪元素覆盖，但当伪元素巧妙设置了 mask 属性，就会出现令人惊奇的“融合”效果。这里，我们为伪元素设置了 mask 属性，用了三个向右铺开的颜色子项，红色在 50% 处终止，这是伪元素呈现自己的底图的区间，这个区间之后是第一个透明色，该透明色在 60%处终止，然后是第二个透明色囊括剩余的区间。由于伪元素右边是透明色，伪元素的底图在这一区域不显示，就能露出宿主元素对应部分的底图。重要的地方是，在50%~60之间红色到第一个透明色的变化是渐变的，是这个渐变部分让两张背景图片的过渡几乎融为一体——当然，我们这个范例的效果还不是非常理想，想要做到更为完美的程度，或许需要更合适的图片和更精细的设置。

最后补充说明一下：mask 属性最好加上 -webkit- 前缀以兼容Chromium内核较低的浏览器，或者，为保险起见，有前缀和没有前缀的都写上：

mask: linear-gradient(to right, red 50%, transparent 60%, transparent 0);
-webkit-mask: linear-gradient(to right, red 50%, transparent 60%, transparent 0);

前一篇: CSS : mask之使用位图做遮罩
下一篇: CSS实现单背景图不间断滚动演示及说明