红影 发表于 2024-8-7 19:53
完成作业一，一下子可以多4个楼层，对翻页倒是挺好
就为这个{:4_170:}
红影 发表于 2024-8-7 19:27
“十六进制颜色还支持透明度的直接表达，方法是在6位数的基础上再加两位十六进制的数字，必须凑足8位数。透 ...
之前应该有提到过
南无月 发表于 2024-8-7 11:17
有理论知识，还有小故事可以听，丽贝卡紫色的故事很感人，学习啦。。
{:4_191:}
南无月 发表于 2024-8-7 11:22
绿色，rgb(0,255,0)传统绿色，rgb(0,128,0)，这个还是传统的比较好看。。
绿色用hsla(120, 100%, 50%, .65 ...
弄清楚现实世界和理论上描述的东东就好
马黑黑 发表于 2024-8-7 20:13
取巧
最省力了，而且可以取接近的颜色{:4_173:}
马黑黑 发表于 2024-8-7 20:15
不错吧？能真切感受到伪元素和宿主元素的关系
100√
是啊，还能看到层级关系。
马黑黑 发表于 2024-8-7 20:16
就为这个
看来我的理解没错{:4_189:}
马黑黑 发表于 2024-8-7 20:16
之前应该有提到过
没注意或是没记住，这里再学习一下真好{:4_187:}
红影 发表于 2024-8-7 21:12
没注意或是没记住，这里再学习一下真好
这样的教程估计比较难找
本帖最后由 马黑黑 于 2024-8-8 22:16 编辑 <br /><br /><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">第十九讲：颜色融合模式 *-blend-mode 和多背景图像的处理</h2>
<h3>一、CSS颜色的融合模式</h3>
<p>web页中存在多种形态的重叠现象，最常见的是元素间的重叠和背景重叠。重叠会导致底层的东东被上层的东东所覆盖，除非刻意这么做，我们一般都不希望如此，我们想让一切都能顺利渲染出来——即便彼此间是重叠的。避免覆盖所造成的遮挡，我们需要一些特殊的技术，我们现在要讲的颜色融合模式就是解决问题的技术之一。</p>
<p>*-blend-mode融合模式共两种，<strong>第一种</strong>是 <span class="textRed">mix-blend-mode</span>。mix-blend-mode是一个CSS属性，用于决定当元素重叠时如何呈现各自的颜色，共有十多种方式供我们选择：</p>
<div class="hE"><pre>
normal： 正常模式（默认），没有混合
multiply ：正片叠加，基色和目标色复合后替换目标色。合成色至少与基色或目标色一样深。任何颜色与黑色复合得到黑色。任何颜色与白色复合保持初始颜色。
screen ：滤色，把背景色的互补色与基色混合，取结果的互补色。合成色至少和两个构成色一样浅。任何颜色与白色滤色产生白色；和黑色滤色颜色不变。效果类似于在一个屏幕上投影多个幻灯片。
overlay ：叠加，对颜色正片叠底或滤色依赖于背景色值。基色覆盖背景同时保留高光和阴影。背景色没有被替换但是与基色混合来反映背景的亮暗。
darken ：变暗，选择背景和基色的较暗部分。背景被基色中较暗的部分替换；否则，保持不变。
lighten ：变亮，选择背景和基色中较亮的部分。背景被基色中较亮的部分替换；否则，保持不变。
color-dodge ：颜色咸淡，减淡背景色来反映基色。黑色绘制的部分不变。
color-burn ：颜色加深，加深背景色来反映基色。白色绘制的部分不变。
hard-light ：强光，对颜色正片叠底或滤色依赖于基色值。效果类似于在背景上用强聚光灯照射。
soft-light ：柔光，使颜色变暗或变亮，取决于基色值。效果类似于在背景上用发散的聚光灯照射。
difference ：差值，从较浅的颜色中减去两个组成颜色的较深部分。白色绘制的部分背景反色；黑色绘制的部分不变。
exclusion ：排除，产生类似于差值模式的效果但是对比度更低。白色绘制的部分背景反色；黑色绘制的部分不变。
hue ：色相，创建于基色的色相、饱和度和亮度相同的颜色。
color ：颜色，创建色相和量度和基色相同，饱和度和背景色相同的颜色。保持背景的灰度并且对于给单色图片或图片着色很有用。
saturation ：创建饱和度与基色相同，色相和亮度与背景色相同的颜色。在背景是纯灰（没有饱和度）的区域使用这个模式不产生改变。
luminosity ：光亮或亮度，创建亮度和基色相同，色相和饱和度与背景色相同的颜色。这个模式产生的效果和Color模式相反。你可以用这个模式创建和许多网页头部图片效果一样的单色图片效果。
</pre></div>
<p>下面是两张图片，我们将使用它们来做演示：</p>
<img src="https://638183.freep.cn/638183/t22/51/g4.jpg" width="360" height="240" alt="" />
<img src="https://638183.freep.cn/638183/t22/51/g3.jpg" width="360" height="240" alt="" />
<p>现在，我们用盒子即元素的背景加载第一张图片，第二张图片用img标签作为盒子的子元素加载并覆盖在父元素之上：</p>
<div class="hE"><pre id="pre1">
<style>
.bbox1 {
margin: auto;
width: 800px;
height: 460px;
background: url('https://638183.freep.cn/638183/t22/51/g4.jpg') no-repeat center/cover;
position: relative; /* 父元素相对定位 */
}
.mypic {
position: absolute; /* 子元素绝对定位 + 以下的100%宽高可确保子元素覆盖父元素 */
width: 100%;
height: 100%;
mix-blend-mode: darken; /* 使用混合滤镜令元素以 darken 方式呈现 */
}
</style>
<div class="bbox1">
<img class="mypic" src="https://638183.freep.cn/638183/t22/51/g3.jpg" alt="" />
</div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>融合效果可能不令人满意，比如菇凉的草帽不见了，菇凉身子的中段和海水过度融合了，但这是一个实现思路，且当图像的颜色配套，我们选用一个合适的 blend-mode 值可以达到理想的融合效果。</p>
<p><strong>第二种</strong>融合模式是背景融合，<span class="textRed">background-blend-mode</span>，该模式允许重叠的诸多背景以选定的方式进行融合从而达到多个背景混合成最终的样式。mix-blend-mode 指向单一的元素，令使用了该属性的元素和其下层的颜色融合，而 background-blend-mode 则是指向同一元素下的多个 background 背景图像。以下演示依然使用上面的两张图片，我们给盒子加载这两张背景图再加上一个颜色，酱紫盒子的图层共三个，然后使用 background-blend-mode 对之进行融合处理：</p>
<div class="hE"><pre id="pre2">
<style>
.bbox2 {
margin: auto;
width: 800px;
height: 460px;
/* 下面设置两张背景图外加一个颜色 */
background:
url('https://638183.freep.cn/638183/t22/51/g3.jpg') no-repeat center/cover,
url('https://638183.freep.cn/638183/t22/51/g4.jpg') no-repeat center/cover,
olive;
background-blend-mode: darken, lighten; /*背景融合滤镜 ：darken作用于第一张图片，lighten作用于第二张图片 */
}
</style>
<div class="bbox2"></div>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>效果和前面的背景+img元素的演示不尽相同，原因是我们在两张图片的基础上加了一个颜色，两张图片各自使用了融合滤镜，致使它们某些区域存在一定的透明度，背景颜色因此可以渗透到整体颜色呈现机制。我们可以看到，多背景图层修饰的元素通过 background-blend-mode 滤镜的处理，所有的图层均能呈现出来，但图层都不是独立呈现，而是交融在了一起。这里提示一下，选用什么滤镜值是一件复杂的工作，一般都是根据图样和滤镜原理进行分析决定采用什么率精致，然后多做尝试。</p>
<h3>二、元素多背景图像的处理</h3>
<p>上个演示实例其实已经给出了多重图片、颜色做背景的解决方案，不过盒子的多重背景设置不止于此，所以还要单独讲讲。</p>
<p>使用 background-* 属性设置背景内容丰富，我们常用到的有：① background-color，背景颜色； ② background-image，背景图片；③ background-repeat，背景图片重复与否；④ background-position，背景图片的位置，分XY轴两个方向值；⑤ background-size，背景图片呈现的尺寸；⑥ background-blend-mode，前面讲的背景图片的融合方式。此外，background 属性是一个集合属性，它以语法糖的形式将多个属性集中在一块儿写，可以带颜色、背景图片以及背景图片的重复方式、位置和背景大小。以下是盒子多背景设置方法举例：</p>
<div class="hE"><pre>
/* CSS代码 ：盒子多背景设置举例 */
background-color: rgb(128,128,0); /* 背景颜色 */
background-image: url('图片地址1'), url('图片地址2');/* 背景图片 ：两张 */
background-repeat: no-repeat, repeatX;/* 背景重复 ：第一张不重复，第二张X轴方向重复 */
background-position: 0 0, 50% 50%; /* 背景位置 ：第一张从左上角开始，第二张居中 */
background-size: cover, 100% 100%; /* 背景尺寸 ：第一张以封面样式伸缩，第二张按盒子尺寸伸缩 */
/* 以上代码等价于如下语法糖格式 */
background:
url('图片地址1') no-repeat 0 0/cover,
url('图片地址2') repeatX center/cover，
rgb(128,128,0);
/* 多张图片做背景时如果有重叠，则只显示最第一张图片背景 */
/* 所以应考虑使用什么方法解决问题，比如使用背景融合滤镜 */
background-blend-mode: 值1, 值2; /* 值1针对第一张图片，值2针对第二张图片 */
</pre></div>
<p>但这只是代码的写法，真正设置多背景图是要充分考虑重叠时是否需要进行处理。如果一张大图背景之上布置几个小图背景，若背景小图的背景是透明的，我们可以不用处理什么，设置好尺寸和位置即可；但若不是，就需要使用相应的办法来消除小图的背景色或将之自然融合到主背景中，可选方法不外乎背景融合滤镜 background-blend-mode、遮罩滤镜 -webkit-mask、透明度 opacity 或 filter: opacity(num) 等等这些。这是一个重度依赖经验的技术活，多尝试才会得心应手。</p>
<p>作业：使用一大一小的图片做盒子的背景图，大图片铺满整个元素，小图片repeat与否自行决定，再辅以一个带透明度的颜色加入背景图层中以改善最终的颜色合成效果，要求作品看上去自然得体。【提示】.svg、.gif 和 .webp 等格式的图片可以是动态图片，这意味着，元素的背景图片是可以动的，大家可以一试。</p>
<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>
马黑黑 发表于 2024-8-7 23:04
这样的教程估计比较难找
没人会专门写这个的{:4_173:}
直接用background: 设置两张图片的时候，图片的大小就直接是设置的尺寸了，所以作业里要求一大一小的图图就不能这样设了{:4_204:}
红影 发表于 2024-8-8 20:30
直接用background: 设置两张图片的时候，图片的大小就直接是设置的尺寸了，所以作业里要求一大一小的图图就 ...
哦，也可以，就是把小图在语法糖里设置大小。还是分开来比较方便{:4_173:}
mix-blend-mode的模式解说特别好，每次都记不住，需要使用时都需要去查，这个里面要好好看看了{:4_187:}
background-* 属性设置也讲得很细致{:4_187:}
background-blend-mode: darken, lighten; /*背景融合滤镜 ：darken作用于第二张图片，lighten作用于第二张图片 */
darken作用于第一张图片？
repeatX应该有个小横杠吧，是repeat-x，repeat-y
<style>
.hy2 {
margin: auto;
width: 600px;
height: 400px;
background:
url('https://638183.freep.cn/638183/web/svg/4yecc.svg') repeat-y 96% 0/100px 100px,
url('https://638183.freep.cn/638183/t22/hl/bjehp.webp') no-repeat center/cover,
rgba(164,232,33,.3);
background-blend-mode: overlay, lighten;
}
</style>
<div class="hy2"></div>
对用background: 设置多张张图片不太熟悉，就用这个完成一下作业。图图用了前面帖子里的。主要做个试验。呵呵，y向重复的小图，因为用了background-blend-mode: overlay，在不同背景影响下，展示的结果不同。
为什么手机看会有一块白的重叠呢