这样的文本与图片的融合技术小九肯定喜欢

马黑黑

送上人 [唐]劉長卿

孤云将野鹤，岂向人间住。
莫买沃洲山，时人已知处。

马黑黑

刚写好的代码，尚未细细推敲：

1. <style>
   
2. .bgBox{
   
3.         margin: auto;
   
4.         width: 500px;
   
5.         height: 281px;
   
6.         position: relative;
   
7. }
   
8. .bgBox img { width: 100%; }
   
9. .bgBox p {
   
10.         position: absolute;
    
11.         top: 0; left: 0;
    
12.         width: 100%;
    
13.         height: 100%;
    
14.         font: 900 2em / 1.2em Sans-serif;
    
15.         color: gold;
    
16.         text-align: center;
    
17.         text-shadow: 1px 1px 2px rgba(0,0,0,.6);
    
18.         mix-blend-mode: difference;
    
19. }
    
20. </style>
    
21. 
    
22. <div class="bgBox">
    
23.         <img src="https://638183.freep.cn/638183/Pic/2022/jz.gif" alt="" />
    
24.         <p>送上人 [唐]劉長卿<br><br>孤云将野鹤，岂向人间住。<br>莫买沃洲山，时人已知处。</p>
    
25. </div>

复制代码

我将很快会针对 xxx-blend-mod 的CSS混会技术做说明，在我的小地儿

马黑黑

前景色（即文本颜色）设置成不同的颜色，得到的效果将不一样。当然，更换图片，效果也会大不相同。

图片不一定非得GIF动图，静态图片也是可以的

马黑黑

@小九 @小辣椒 @红影 @绿叶清舟 @转转 @来看你 @朵拉 @ 大猫咪 @加林森

加林森

这个字体真漂亮，还分成了三排，真好看。老黑辛苦啦。

马黑黑

加林森 发表于 2022-4-10 14:12
这个字体真漂亮，还分成了三排，真好看。老黑辛苦啦。

嗯，很漂亮的。这是新的滤镜。

加林森

马黑黑 发表于 2022-4-10 14:14
嗯，很漂亮的。这是新的滤镜。

我等会锻炼回来再去试一试静图片，看看是什么效果。

马黑黑

加林森 发表于 2022-4-10 14:20
我等会锻炼回来再去试一试静图片，看看是什么效果。

期待中

加林森

马黑黑 发表于 2022-4-10 14:51
期待中

老黑下午好。我回来了。

红影

马黑黑 发表于 2022-4-10 13:52
前景色（即文本颜色）设置成不同的颜色，得到的效果将不一样。当然，更换图片，效果也会大不相同。

图片 ...

觉得动态图更好，让文本仿佛也是变色的呢。

红影

马黑黑 发表于 2022-4-10 13:51
刚写好的代码，尚未细细推敲：
我将很快会针对 xxx-blend-mod 的CSS混会技术做说明，在我的小地儿

       top: 0; left: 0;
        width: 100%;
        height: 100%;

为什么要设置这步，直接用 text-align: center;不行么。是考虑竖向也居中么，记得line-height也能的啊。

红影

color: gold;
mix-blend-mode:命令下都快看不出原色了呢
看起来文字粗点效果更好。

转转

好，诗歌本有仙幻意境，用动态图画表现出来，真有绮丽和神异的感觉

马黑黑

红影 发表于 2022-4-10 19:46
觉得动态图更好，让文本仿佛也是变色的呢。

都可以的，关键是一幅好图、恰当的前景色

马黑黑

转转 发表于 2022-4-10 20:03
好，诗歌本有仙幻意境，用动态图画表现出来，真有绮丽和神异的感觉

转转好久不见。晚上好

马黑黑

红影 发表于 2022-4-10 19:49
top: 0; left: 0;
        width: 100%;
        height: 100%;

图片与文本没有隶属关系，你试着不定位看看

绿叶清舟

这是滤镜效果啊，变色速度也能调的吧

马黑黑

绿叶清舟 发表于 2022-4-10 20:30
这是滤镜效果啊，变色速度也能调的吧

变色速度根据图片的动态情况

绿叶清舟

马黑黑 发表于 2022-4-10 20:35
变色速度根据图片的动态情况

那是后面的图片让字变色的啊

马黑黑

绿叶清舟 发表于 2022-4-10 20:42
那是后面的图片让字变色的啊

理论上，融合技术就是的目的就是这么一回事吧