马黑黑 发表于 2025-8-19 12:37

The Last Witness

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa {
                --offsetX: 81px;
                --limit: 10px;
                --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>

马黑黑 发表于 2025-8-19 12:37

本帖最后由 马黑黑 于 2025-8-19 13:09 编辑 <br /><br /><div class="codebox">
&lt;style&gt;
        @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; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=2651100623" autoplay loop&gt;&lt;/audio&gt;
                &lt;video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/20/12/02/58/video682bfef21f54c.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="ma" class="grayscale"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        FS(pa, ma);
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-8-19 13:01

本帖最后由 马黑黑 于 2025-8-19 13:04 编辑

帖子容器 #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 融合模式

杨帆 发表于 2025-8-19 13:34

讲的真好，对背景融合有了更好的理解，谢谢马老师{:4_191:}

红影 发表于 2025-8-19 14:29

去试了一下，按下列排序，不用融合也都能呈现，只是女孩的黑色背景无法弄掉了{:4_173:}
                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

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

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

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

谢谢

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

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

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

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

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

{:4_190:}

老谟深虑 发表于 2025-8-19 18:35

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

马黑黑 发表于 2025-8-19 18:38

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

晚上好！喝了没？

梦江南 发表于 2025-8-19 18:43

女孩手上的小播真漂亮。{:4_187:}

马黑黑 发表于 2025-8-19 18:57

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

这是一个图片

红影 发表于 2025-8-19 20:59

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

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

红影 发表于 2025-8-19 21:00

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

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

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

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

辛苦{:4_190:}

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

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

不滥用就行

红影 发表于 2025-8-19 22:29

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

学的人没有教的人辛苦，黑黑更辛苦呢{:4_187:}

红影 发表于 2025-8-19 22:30

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

就是，不能非法拘禁{:4_173:}

马黑黑 发表于 2025-8-19 23:10

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

嗯嗯，遵纪守法
页: [1] 2 3 4 5 6 7
查看完整版本: The Last Witness