文本在图片之上的mix-blend-mode16种滤镜效果比较

马黑黑

马黑黑

HTML代码举例：

<div class="bgBox">
    <img src="图片地址" alt="" />
    <p style="mix-blend-mode:multiply;">文本内容</p>
</div>

红色部分为滤镜名称，滤镜作用于文本，文本定位在img图片之上（CSS实现）。

马黑黑

前景色不同，图片不同，效果会不一样

马黑黑

本帖示范例子的文本色统一设定为 gold（金黄色）

东篱闲人

马黑黑 发表于 2022-4-11 18:01
HTML代码举例：

这个代码好像不咋灵啊。。。

马黑黑

东篱闲人 发表于 2022-4-11 18:42
这个代码好像不咋灵啊。。。

可能你尝试的缺少CSS支持，不然不会不灵。另一个帖子里有，我再给一个：
<style>
        .bgBox { margin: 10px auto 0; display: flex; justify-content: center; align-items: center; width: 500px; height: 281px; position: relative; }
        .bgBox img { position: absolute; width: 100%; }
        .bgBox p { position: absolute; width: 100%; height: 100%; padding-top: 20px; font: 900 2em / 1.2em Sans-serif; color: gold; text-align: center; text-shadow: 1px 1px 2px rgba(0,0,0,.6); }
</style>



<div class="bgBox">
    <img src="图片地址" alt="" />
    <p style="mix-blend-mode:multiply;">文本内容</p>
</div>

东篱闲人

马黑黑 发表于 2022-4-11 18:47
可能你尝试的缺少CSS支持，不然不会不灵。另一个帖子里有，我再给一个：

        .bgBox { margin: 10px auto ...

这个很灵！

马黑黑

东篱闲人 发表于 2022-4-11 19:03
这个很灵！

对的，必须有CSS帮忙

东篱闲人

马黑黑 发表于 2022-4-11 19:09
对的，必须有CSS帮忙

字体大小在哪里调节？

东篱闲人

对了，还有文字上下位置的调节。。。。

加林森

老黑，我已经制作出来一个了，你去看看。

马黑黑

加林森 发表于 2022-4-11 19:30
老黑，我已经制作出来一个了，你去看看。

好的

马黑黑

东篱闲人 发表于 2022-4-11 19:15
字体大小在哪里调节？

字体在 font: 那一句。比如：

font: normal 16px / 20px '宋体';

normal 是正常字体，用 bold 表示粗体，用 900 也行，表示很粗很粗；16px / 20px表示，前者是字号，16px大小，后者是文字占的行高，与所在元素高度一致时垂直居中（单行文本用），一般的行高设为大于字号一点点就好。后面的 ‘宋体' 表示用什么字体，用汉字表达要放在小角单或双引号内。

东篱闲人

马黑黑 发表于 2022-4-11 19:43
字体在 font: 那一句。比如：

font: normal 16px / 20px '宋体';

收到

马黑黑

东篱闲人 发表于 2022-4-11 19:20
对了，还有文字上下位置的调节。。。。

单行文字用与所在元素一样高的行高就不能调节上下了，左右可以（text-align不要就居左）；至于像文本流自然地放置，则需要将行高设置为大于等于字号大小便可。详情查看上面的另一个答复。

红影

马黑黑 发表于 2022-4-11 18:36
本帖示范例子的文本色统一设定为 gold（金黄色）

同样的颜色，不同的混合命令下，效果竟如此不同，非常惊奇
这个太好了，能直接看到各种混合效果。黑黑真棒

马黑黑

红影 发表于 2022-4-11 22:39
同样的颜色，不同的混合命令下，效果竟如此不同，非常惊奇
这个太好了，能直接看到各种混合效 ...

效果总要演示一下，这样所谈论的东东才不会空洞

红影

马黑黑 发表于 2022-4-12 07:37
效果总要演示一下，这样所谈论的东东才不会空洞

饿呢你，这个非常直观。黑黑太棒了

仔细比较了一下，喜欢4、5、8、10、11、12、14几个，滤镜的效果更明显。以后想要的文字滤镜效果可以来这个帖子里找了，真好！

马黑黑

红影 发表于 2022-4-13 19:21
饿呢你，这个非常直观。黑黑太棒了

仔细比较了一下，喜欢4、5、8、10、11、12、14几个，滤镜 ...

首先，俺不饿，因为俺们木有封村

其二，滤镜效果需要依赖关系，之前说过的，不同的背景、不同的图片，各个滤镜产生的效果都会不尽一样

红影

马黑黑 发表于 2022-4-13 19:39
首先，俺不饿，因为俺们木有封村

其二，滤镜效果需要依赖关系，之前说过的，不同的背景、不 ...

哈哈，发现我总错这个字，让你饿了好几回了

同样的背景同样的字体，这种情况下的比较最直接了呢。