请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-1-12 21:30 编辑
mask是遮罩之意。在CSS里，mask属性支持用位图做遮罩。用于遮罩的位图，可以是PNG、GIF、webp、svg等具有透明区域的图片，因为，mask的工作原理是这样：用于遮罩的图片，该图片透明的部分所遮挡的目标区域将得不到呈现，反之，该图片任意非透明的部分所遮挡的目标区域则得到呈现。所以，遮罩图片如果没有透明区域，它对目标对象的遮罩没有意义、只在目标对象之上呈现它自己。
我在网上随便找一张来自摄图网的图片（450*300），它将作为HTML盒子的背景：
然后，我将用如下这张我网盘里的位图（200*200）遮挡上方的图片，它将充当遮罩位图：
我们先给HTML盒子做一个CSS样式：
.mybox {
width: 450px;
height: 300px;
background: url('底图地址') no-repeat center/cover;
mask: url('遮罩图地址') repeat-x -20px 10px / 240px 240px;
}
以上，我们给 .mybox 选择器添加了前面准备好的背景图片，其中的参数 no-repeat center/cover 是多余的，因为图片的尺寸和盒子的尺寸一致，我们这么做只是为了方便我们更换底图以及和下一行的mask属性语法做比较。
然后，我们使用了 mask 属性，略作比较就可以轻易看到，它的语法与 background 完全一样：用 url('图片') 语句给出图片地址；接着是 repeat 参数，mask位图重复与否的参数，这里用了水平方向重复即 repeat-x；再接着设定位置（mask-position），-20px 10px 表示水平方向往左偏移 20px、垂直方向往下偏移 10px，这是考虑位图与底图的和谐布局问题；最后，我们让位图以 240 * 240 的尺寸（mask-size）对底图进行遮罩，之所以这么设计，与遮罩位图的位置考量是一个道理。
然后，写出HTML代码，就可以看到效果了：
<div class="mybox"></div>
现在，我们应该可以理解：元素的 mask 属性通过使用有透明区域的图片，可以对元素的背景进行遮罩，位图透明的区域之下，元素背景不可见，反正，位图非透明的区域之下，元素背景可见。换言之，mask 属性用透明的区域遮盖背景、用非透明的区域呈现背景，从而达到特殊的遮盖目的。
mask 属性的应用场景应该是很广泛的，上例虽然不能给我们以完美的启发，但至少我们从中学会了一个全新的方法，剩下的只是想象力和创造力了。
应该注意的是，使用了mask属性的元素，默认情况下其周边属性样式如 border、outline、box-shadow 都将失效，原因是盒子外围都被遮罩了。我们上面的例子之所有边框，那是因为我给 mybox 加了一个外壳。
最后，给第二个盒子改变一下遮罩代码：
.mybox:nth-of-type(2) {
mask: url('https://638183.freep.cn/638183/t23/btn/12f.png') no-repeat 100px center/75%;
}
| 
发表于 2024-1-12 11:54
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-1-12 12:20
发表于 2024-1-12 20:58
