马黑黑 发表于 2022-4-10 13:48

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

<style>
.bgBox{
        margin: auto;
        width: 500px;
        height: 281px;
        position: relative;
}
.bgBox img { width: 100%; }
.bgBox p {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        font: 900 2em / 1.2em Sans-serif;
        color: gold;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0,0,0,.6);
        mix-blend-mode: difference;
}
</style>

<div class="bgBox">
        <img src="https://638183.freep.cn/638183/Pic/2022/jz.gif" alt="">
        <p><br>送上人 [唐]劉長卿<br><br>孤云将野鹤,岂向人间住。<br>莫买沃洲山,时人已知处。</p>
</div>

马黑黑 发表于 2022-4-10 13:51

刚写好的代码,尚未细细推敲:
<style>
.bgBox{
        margin: auto;
        width: 500px;
        height: 281px;
        position: relative;
}
.bgBox img { width: 100%; }
.bgBox p {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        font: 900 2em / 1.2em Sans-serif;
        color: gold;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0,0,0,.6);
        mix-blend-mode: difference;
}
</style>

<div class="bgBox">
        <img src="https://638183.freep.cn/638183/Pic/2022/jz.gif" alt="" />
        <p>送上人 [唐]劉長卿<br><br>孤云将野鹤,岂向人间住。<br>莫买沃洲山,时人已知处。</p>
</div>我将很快会针对 xxx-blend-mod 的CSS混会技术做说明,在我的小地儿

马黑黑 发表于 2022-4-10 13:52

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

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

马黑黑 发表于 2022-4-10 13:54

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

加林森 发表于 2022-4-10 14:12

这个字体真漂亮,还分成了三排,真好看。老黑辛苦啦。{:4_190:}

马黑黑 发表于 2022-4-10 14:14

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

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

加林森 发表于 2022-4-10 14:20

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

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

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

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

期待中

加林森 发表于 2022-4-10 17:03

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

老黑下午好。我回来了。

红影 发表于 2022-4-10 19:46

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

图片 ...

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

红影 发表于 2022-4-10 19:49

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

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

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

红影 发表于 2022-4-10 19:56

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

转转 发表于 2022-4-10 20:03

好,诗歌本有仙幻意境,用动态图画表现出来,真有绮丽和神异的感觉{:4_178:}

马黑黑 发表于 2022-4-10 20:14

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

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

马黑黑 发表于 2022-4-10 20:14

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

转转好久不见。晚上好

马黑黑 发表于 2022-4-10 20:15

红影 发表于 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:30
这是滤镜效果啊,变色速度也能调的吧

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

绿叶清舟 发表于 2022-4-10 20:42

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

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

马黑黑 发表于 2022-4-10 21:20

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

理论上,融合技术就是的目的就是这么一回事吧
页: [1] 2 3 4
查看完整版本: 这样的文本与图片的融合技术小九肯定喜欢