请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
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);
| 
发表于 2024-1-13 12:49
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-1-13 13:13
发表于 2024-1-13 16:51
楼主
