马黑黑 发表于 2024-8-4 10:59
这叫添色
那个文字阴影也很漂亮{:4_187:}
马黑黑 发表于 2024-8-4 10:59
你确定没有误人子弟？
误人子弟怕啥，反正是人家的子弟，我们没误啊，不但没误而且有悟{:4_173:}
马黑黑 发表于 2024-8-4 11:00
有明确参照
是的，有参照的更容易理解{:4_187:}
马黑黑 发表于 2024-8-3 22:41
谢谢
想说一声老师辛苦啦，喝杯咖啡{:4_190:}
小白感觉写教程感觉超级费神，
要组织，还要示范给小白看，
不过看老师信手掂来也轻轻松松{:4_170:}
红影 发表于 2024-8-4 11:58
.hyhy {
padding: 6px;
font: bold 3em sans-serif;
影子这个作业非常漂亮{:4_199:}{:4_187:}
南无月 发表于 2024-8-4 18:56
影子这个作业非常漂亮
找了个艳丽的小动图，就衬在下面了{:4_173:}
<style>
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.showDiv { position: relative; }
</style>
<div class="artbox">
<h2 class="textMid">第十六讲：CSS遮罩</h2>
<p>CSS的遮罩技术使用 <mark>mask</mark> 属性实现对可视元素的裁切，具体实现方式是在元素的mask属性中使用一个图像做遮罩体，该图像透明的部分将遮挡元素对应区域、不透明的部分将呈现元素对应的区域。</p>
<p>这里有两张图片，左边的图片将是 img 标签的 src，右边的图片用做 img 的遮罩体。意思就是，图片实体img元素所呈现的图片将不是原始的，它将被第二张图片以 mask 属性的方式对之进行裁切。</p>
<p><img src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" /><img src="https://638183.freep.cn/638183/small/ying.png" alt="" /></p>
<p>我们先来看默认的遮罩代码和效果：</p>
<div class="hE"><pre id="pre1">
<style>
.pic1 {
mask: url('https://638183.freep.cn/638183/small/ying.png');
-webkit-mask: url('https://638183.freep.cn/638183/small/ying.png'); /* 兼容Chromium内核 ＜ 120 */
}
</style>
<img class="pic1" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>当代浏览器已经完美支持mask属性，如果考虑兼容性问题可多加一个带 -webkit- 前缀的mask属性，-webkit-mask。上例，mask属性的赋值和background属性的赋值完全一样，我们也完全可以按照背景图像的赋值规范做必要的设置：</p>
<div class="hE"><pre id="pre2">
<style>
.pic2 {
mask: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/80% 100%;
-webkit-mask: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/80% 100%;
}
</style>
<img class="pic2" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p><mark>no-repeat</mark>禁止了裁切的重复；<mark>center</mark> 表示裁切中心在元素的中心，等价于 <mark>50% 50%</mark>；<mark>80% 100%</mark> 是mask的裁切尺寸，注意，使用百分比表达裁切尺寸时该尺寸基于主元素，是主元素宽高的百分之几。</p>
<p>以上我们用的是mask属性的简写形式，repeat对应的是 <span class="textRed">mask-repeat</span>、<span class="textRed">mask-position</span> 和 <span class="textRed">mask-size</span>，这与背景相关的 background-* 是一一对应的，稍加思考就可以理解和掌握。mask 属性自身也是简写属性，mask 属性使用图像的对应属性应该是 <span class="textRed">mask-image</span>，这与 background 和 background-image 的关系一个道理。mask-* 属性还有很多，有兴趣有余力的童鞋可以去学习研究，我们稍后可能会讲到少数用得上的属性。</p>
<p>以上我们使用带有透明的图片做遮罩体去遮罩另一个画面——我们可以称之为源，可以是图片或其他可视界面。下面我们使用CSS渐变来充当遮罩体（记住，渐变本身就是图像），创建一个径向渐变做遮罩mask的属性值，可视区域设计为70%，为消除椭圆边缘的锯齿，透明色与红色之间有一个小过渡：</p>
<div class="hE"><pre id="pre3">
<style>
.pic3 {
mask: radial-gradient(red 70%, transparent 70.5%, transparent 0);
-webkit-mask: radial-gradient(red 70%, transparent 70.5%, transparent 0);
}
</style>
<img class="pic3" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
</pre></div>
<p><button id="btn3" type="button" value="3">点击查看效果</button></p>
<div id="sbox3" class="showDiv"></div>
<p>上面的示例是把图像（源）的周边30%裁切掉，我们也可以反过来设计，裁切源图片的中心部分。这次我们下手轻一点，在源图片的中央用mask属性割走一个半径50px的圆，该圆下的源图区域不会显示，源图底下是什么就是什么：</p>
<div class="hE"><pre id="pre4">
<style>
.pic4 {
mask: radial-gradient(circle, transparent 50px, red 51px, red 0);
-webkit-mask: radial-gradient(circle, transparent 50px, red 51px, red 0);
}
</style>
<img class="pic4" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
</pre></div>
<p><button id="btn4" type="button" value="4">点击查看效果</button></p>
<div id="sbox4" class="showDiv"></div>
<p>我们继续对我们的湖泊这个源图像做其他的遮罩操作。我曾见过一位大佬用十分复杂的方式做一个两边有半圆凹槽的奖券，我们现在也实现湖泊变奖券形状的功能，但代码相当简洁：</p>
<div class="hE"><pre id="pre5">
<style>
.pic5 {
mask: radial-gradient(circle, transparent 40px, red 42px, red 0) -237px 0 / 100% 100%;
-webkit-mask: radial-gradient(circle, transparent 40px, red 42px, red 0) -237px 0 / 100% 100%;
}
</style>
<img class="pic5" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
</pre></div>
<p><button id="btn5" type="button" value="5">点击查看效果</button></p>
<div id="sbox5" class="showDiv"></div>
<p>设计要点：① 渐变是圆形；② 遮罩渐变背景的 mask-position X轴位置是图像源宽度的一半，使用实体单位长度而非百分比；③ 遮罩渐变尺寸 mask-size XY轴均为100%；④ 允许渐变重复（repeat，默认）。第 ② 个要点基于被遮罩对象即源的宽度，通用性较差，我们可以用如下一了百了的方法加以实现上个示例的功能：</p>
<div class="hE"><pre id="pre6">
<style>
.pic6 {
mask:
radial-gradient(circle at 0 50%, transparent 40px, red 42px, red 0),
radial-gradient(circle at 100% 50%, transparent 40px, red 42px, red 0);
-webkit-mask:
radial-gradient(circle at 0 50%, transparent 40px, red 42px, red 0),
radial-gradient(circle at 100% 50%, transparent 40px, red 42px, red 0);
-webkit-mask-composite: source-in;
}
</style>
<img class="pic6" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
</pre></div>
<p><button id="btn6" type="button" value="6">点击查看效果</button></p>
<div id="sbox6" class="showDiv"></div>
<p>此法不再关心被遮罩对象的任何尺寸，我们要做的是设计两组径向渐变，令它们所开的凹槽朝向互反，然后用 maks-composite 属性将两个遮罩体组合起来，属性值是 source-in，表示遮罩重叠的位置显示、不重叠的位置不显示。maks-composite属性的资料目前较少，官网也只有英文版且仅介绍少量几个合成值，但合成属性值理论上来源于blend-mode融合技术，新版的chromium内核的浏览器已经完好支持，<a href="http://mhh.52qingyin.cn/art/show.php?st=1&sd=1&art=mahei_1711670988" target="_blank">CANVAS画布图形合成模式演示</a> 一文所提供的资料可做原理性参考。</p>
<p>本讲全部的五个演示例子，都是基于对源进行遮罩裁切的，这也是mask属性的主要功能，但其用途不仅仅局限于此。例如，我们可以用它来做图片融合使两张或更多的图片成为一体，我们甚至可以将视频融入背景图片中。用mask属性将多个单元的内容融合在一起，我此前的一些音画帖做过这方面的尝试，比如<a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1721712629" target="_blank">《出埃及记》</a>是图片与视频的融合、<a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1722486281" target="_blank">《另一个自己》</a>是图片和图片的融合，使用的技巧都是基于mask属性，感兴趣的童鞋可以去做一下代码层面的研究。</p>
<p>作业：给任意视频做 mask 剪裁，要求在视频的右上角剪去一个小三角形，剪裁边缘不能有锯齿。视频代码和相应的CSS样式如下：</p>
<div class="hE"><pre>
<style>
.vid {
width: 600px;
height: 360px;
object-fit: cover; /* 视频内容适应元素尺寸 */
/* -webkit-mask: ... 这里设计mask属性值 */
}
</style>
<video class="vid" src="视频地址" autoplay loop></video>
</pre></div>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
var runCodes = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
.forEach((btn,key) => {
var pres = ,
outs = ;
btn.onclick = () => {
runCodes(pres.innerText, outs);
btn.disabled = true;
}
});
</script>
<style>
.qsfg16 {
mask: repeat-radial-gradient(circle, transparent 3px, red 4px, red 0) -237px0/ 100% 3%;
-webkit-mask: radial-gradient(circle, transparent 3px, red 4px, red 0) -237px0/ 100% 3%;
}
</style>
<img class="qsfg16" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
<style>
.qsfg160 {
mask: radial-gradient(circle, transparent 3px, red 4px, red 0) 0-147px/ 3% 100%;
-webkit-mask: radial-gradient(circle, transparent 3px, red 4px, red 0) 0-147px/ 3% 100%;
}
</style>
<img class="qsfg160" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
对老师贴子里的两个半圆感兴趣，整了两个小锯齿{:4_173:}
南无月 发表于 2024-8-5 13:02
对老师贴子里的两个半圆感兴趣，整了两个小锯齿
弄成周边都是锯齿更厉害了
红影 发表于 2024-8-4 12:07
误人子弟怕啥，反正是人家的子弟，我们没误啊，不但没误而且有悟
听起来就是误了{:4_170:}
{:4_203:}
红影 发表于 2024-8-4 22:17
找了个艳丽的小动图，就衬在下面了
效果很欢快的样纸
红影 发表于 2024-8-4 12:08
是的，有参照的更容易理解
这是人的局限：喜欢对比
红影 发表于 2024-8-4 12:00
选的动图貌似有些太快了
可以用作图软件调整一下
红影 发表于 2024-8-4 11:58
.hyhy {
padding: 6px;
font: bold 3em sans-serif;
100√
红影 发表于 2024-8-3 19:55
我就是单独测试的啊。
刚才又去试了一下，把那50%分别取10 20 之类的，好像有点感受了。然后左和下的取 ...
实践出真知
下一讲等翻页
马黑黑 发表于 2024-8-6 19:50
下一讲等翻页
老师都更新十六讲了，
学生慢慢学习哈~~{:4_190:}