The Last Witness

马黑黑

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 81px; --ma-size: 15%; --bg: url('https://638183.freep.cn/638183/t24/w5/sv.webp') no-repeat center/100% 100%, url('https://638183.freep.cn/638183/t24/w5/iyuu05.webp') no-repeat 0% 95%/30% 50%, repeating-linear-gradient(45deg, rgba(30,144,255,.15) 0 1px, transparent 2px 20px), repeating-linear-gradient(135deg, rgba(30,144,255,.15) 0 1px, transparent 2px 20px); background-blend-mode: screen, hue, hue; } #ma { left: 7.5%; bottom: 38%; background: url('https://638183.freep.cn/638183/small/2025/f700.webp') no-repeat center/cover; mix-blend-mode: color-dodge; } #btnFs { left: 20px; bottom: 20px; color: #eee; } </style> <div id="pa"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2651100623" autoplay loop></audio> <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/20/12/02/58/video682bfef21f54c.mp4" autoplay loop muted></video> <div id="ma" class="grayscale"></div> </div> <script type="module"> import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js'; FS(pa, ma); </script>

马黑黑

帖子容器 #pa 使用了四个背景：

1. 主背景（图片，湿地、撑伞男子）
2. 次背景（图片，跳舞女孩）
3. 线性渐变（45度斜线）
4. 线性渐变（135度斜线）

CSS3支持多背景。当背景重叠在一起，第一个背景处于最上层，若它没有任何透明区域，则其下的所有背景均被其遮挡，所以使用 background-blend-mode 令其后的图像（含图片和渐变）融合到它之上。帖子中的背景融合设置：

        background-blend-mode: screen, hue, hue;

这表示：

第二个背景（女孩图片）使用了 screen 融合模式，其黑色背景不见了，相当于抠图效果；
第三个背景（45度斜线）和 第四个背景（90度斜线）都是用 hue 融合模式。这两个用什么模式不太重要，但不能用 normal 模式，也应规避能消除所设置颜色的模式。

背景融合代码也可以写成：

        background-blend-mode: screen, hue;

意思是：第二个背景用 screen，余下背景（不论多少个）用 hue

如果写成：

        background-blend-mode: screen;

这说的是：第二个及其余下所有背景都是用 screen 融合模式

杨帆

讲的真好，对背景融合有了更好的理解，谢谢马老师

红影

去试了一下，按下列排序，不用融合也都能呈现，只是女孩的黑色背景无法弄掉了
                repeating-linear-gradient(45deg, rgba(30,144,255,.15) 0 1px, transparent 2px 20px),
                        repeating-linear-gradient(135deg, rgba(30,144,255,.15) 0 1px, transparent 2px 20px),
                        url('https://638183.freep.cn/638183/t24/w5/iyuu05.webp') no-repeat 0% 95%/30% 50%,
                        url('https://638183.freep.cn/638183/t24/w5/sv.webp') no-repeat center/100% 100%;

红影

这个是那个网住一条美人鱼那个帖子的具体实例吧，只是网格变成了斜向的，更好看了

马黑黑

红影 发表于 2025-8-19 14:30
这个是那个网住一条美人鱼那个帖子的具体实例吧，只是网格变成了斜向的，更好看了

谢谢

马黑黑

红影 发表于 2025-8-19 14:29
去试了一下，按下列排序，不用融合也都能呈现，只是女孩的黑色背景无法弄掉了
                repeating-linea ...

有透明区域的放前面是这个效果

马黑黑

杨帆 发表于 2025-8-19 13:34
讲的真好，对背景融合有了更好的理解，谢谢马老师

老谟深虑

           欣赏老师的新作。晚上好！

马黑黑

老谟深虑 发表于 2025-8-19 18:35
欣赏老师的新作。晚上好！

晚上好！喝了没？

梦江南

女孩手上的小播真漂亮。

马黑黑

梦江南 发表于 2025-8-19 18:43
女孩手上的小播真漂亮。

这是一个图片

红影

马黑黑 发表于 2025-8-19 18:20
谢谢

这些网格在某些特定需求时，应该会很惊艳。

红影

马黑黑 发表于 2025-8-19 18:20
有透明区域的放前面是这个效果

记得你说越是前面的越在上层，试验一下是为了记住这个

马黑黑

红影 发表于 2025-8-19 21:00
记得你说越是前面的越在上层，试验一下是为了记住这个

辛苦

马黑黑

红影 发表于 2025-8-19 20:59
这些网格在某些特定需求时，应该会很惊艳。

不滥用就行

红影

马黑黑 发表于 2025-8-19 21:35
辛苦

学的人没有教的人辛苦，黑黑更辛苦呢

红影

马黑黑 发表于 2025-8-19 21:35
不滥用就行

就是，不能非法拘禁

马黑黑

红影 发表于 2025-8-19 22:30
就是，不能非法拘禁

嗯嗯，遵纪守法