css : mask属性之位图遮罩
本帖最后由 马黑黑 于 2024-1-12 21:30 编辑 <br /><br /><style>.pa { font: normal 18px/24px sans-serif; }
.pa p { margin: 10px 0; }
.pa pre { padding: 10px; background: #eee; font-size: 16px; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; }
.wrap {
width: fit-content;
height: fit-content;
border: 1px solid gray;
}
.mybox {
width: 450px;
height: 300px;
background: url('https://img95.699pic.com/photo/50029/2676.jpg_wh300.jpg!/fh/300/quality/90') no-repeat center/cover;
mask: url('https://638183.freep.cn/638183/t23/btn/12f.png') repeat-x -20px 10px / 240px 240px;
-webkit-mask: url('https://638183.freep.cn/638183/t23/btn/12f.png') repeat-x -20px 10px / 240px 240px;
}
.mybox:nth-of-type(2) {
mask: url('https://638183.freep.cn/638183/t23/btn/12f.png') no-repeat 100px center/75%;
-webkit-mask: url('https://638183.freep.cn/638183/t23/btn/12f.png') no-repeat 100px center/75%;
}
</style>
<div class="pa">
<p>mask是遮罩之意。在CSS里，mask属性支持用位图做遮罩。用于遮罩的位图，可以是PNG、GIF、webp、svg等具有透明区域的图片，因为，mask的工作原理是这样：用于遮罩的图片，该图片透明的部分所遮挡的目标区域将得不到呈现，反之，该图片任意非透明的部分所遮挡的目标区域则得到呈现。所以，遮罩图片如果没有透明区域，它对目标对象的遮罩没有意义、只在目标对象之上呈现它自己。</p>
<p>我在网上随便找一张来自摄图网的图片（450*300），它将作为HTML盒子的背景：</p>
<img src="https://img95.699pic.com/photo/50029/2676.jpg_wh300.jpg!/fh/300/quality/90" alt="" />
<p>然后，我将用如下这张我网盘里的位图（200*200）遮挡上方的图片，它将充当遮罩位图：</p>
<img src="https://638183.freep.cn/638183/t23/btn/12f.png" alt="" />
<p>我们先给HTML盒子做一个CSS样式：</p>
<pre>
.mybox {
width: 450px;
height: 300px;
background: url('底图地址') no-repeat center/cover;
mask: url('遮罩图地址') repeat-x -20px 10px / 240px 240px;
}
</pre>
<p>以上，我们给 .mybox 选择器添加了前面准备好的背景图片，其中的参数 no-repeat center/cover 是多余的，因为图片的尺寸和盒子的尺寸一致，我们这么做只是为了方便我们更换底图以及和下一行的mask属性语法做比较。</p>
<p>然后，我们使用了 mask 属性，略作比较就可以轻易看到，它的语法与 background 完全一样：用 url('图片') 语句给出图片地址；接着是 repeat 参数，mask位图重复与否的参数，这里用了水平方向重复即 repeat-x；再接着设定位置（mask-position），-20px 10px 表示水平方向往左偏移 20px、垂直方向往下偏移 10px，这是考虑位图与底图的和谐布局问题；最后，我们让位图以 240 * 240 的尺寸（mask-size）对底图进行遮罩，之所以这么设计，与遮罩位图的位置考量是一个道理。</p>
<p>然后，写出HTML代码，就可以看到效果了：</p>
<pre><div class="mybox"></div></pre>
<div class="wrap">
<div class="mybox"></div>
</div>
<p>现在，我们应该可以理解：元素的 mask 属性通过使用有透明区域的图片，可以对元素的背景进行遮罩，位图透明的区域之下，元素背景不可见，反正，位图非透明的区域之下，元素背景可见。换言之，mask 属性用透明的区域遮盖背景、用非透明的区域呈现背景，从而达到特殊的遮盖目的。</p>
<p>mask 属性的应用场景应该是很广泛的，上例虽然不能给我们以完美的启发，但至少我们从中学会了一个全新的方法，剩下的只是想象力和创造力了。</p>
<p>应该注意的是，使用了mask属性的元素，默认情况下其周边属性样式如 border、outline、box-shadow 都将失效，原因是盒子外围都被遮罩了。我们上面的例子之所有边框，那是因为我给 mybox 加了一个外壳。</p>
<p>最后，给第二个盒子改变一下遮罩代码：</p>
<pre>
.mybox:nth-of-type(2) {
mask: url('https://638183.freep.cn/638183/t23/btn/12f.png') no-repeat 100px center/75%;
}
</pre>
<div class="mybox"></div>
</div>
@小辣椒 这个文字不小了吧 美女遮住了{:5_106:} 本帖最后由 马黑黑 于 2024-1-12 12:44 编辑 <br /><br />{:4_170:} 人家衣着整齐，不用了吧。{:4_189:} 这方法很方便，可以直接添加Png图片了呢{:4_187:} 樵歌 发表于 2024-1-12 15:35
人家衣着整齐，不用了吧。
{:4_196:} 红影 发表于 2024-1-12 15:58
这方法很方便，可以直接添加Png图片了呢
这是一个很有趣的属性 我怎么看不到{:5_115:} 马黑黑 发表于 2024-1-12 18:15
这是一个很有趣的属性
还不知道能这样用{:4_204:} 红影 发表于 2024-1-12 21:03
还不知道能这样用
mask也用过，一些特殊的场景，好像没有专门讲过 侃大山 发表于 2024-1-12 20:58
我怎么看不到
什么浏览器 马黑黑 发表于 2024-1-12 21:16
什么浏览器
百分，我看到的三张图一样的。 侃大山 发表于 2024-1-12 21:23
百分，我看到的三张图一样的。
百分浏览器的内核低于当下流行的内核。我修改了代码，增加了兼容性，你刷新试试。 马黑黑 发表于 2024-1-12 11:54
@小辣椒 这个文字不小了吧
谢谢黑黑，真暖心{:4_173:} 这个图片遮罩效果太美了{:4_178:} 我自己电脑里面测试了，黑黑的效果出来了，就是做进帖里面还不会 自己换个图片玩玩效果也是漂亮的{:4_170:} 小辣椒 发表于 2024-1-12 23:13
自己换个图片玩玩效果也是漂亮的
对的 小辣椒 发表于 2024-1-12 23:12
我自己电脑里面测试了，黑黑的效果出来了，就是做进帖里面还不会
这个要设计一下