马黑黑 发表于 2022-4-11 17:58

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

<style>
        .mama { width: 100%; }
        .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="mama"></div>
<script>
let mixarr = ['normal','multiply','screen','overlay','darken','lighten','color-dodge','color-burn','hard-light','soft-light','difference','exclusion','hue','saturation','color','luminosity'];
let txt = '孤云将野鹤，岂向人间住。<br>莫买沃洲山，时人已知处。';
let hstr = '';
let bgBox = document.querySelector('.bgBox');
for(j=0; j<mixarr.length; j++){
        hstr += `<div class="bgBox">
                <img src="https://638183.freep.cn/638183/Pic/2022/jz.gif" alt="" />
                <p style="mix-blend-mode: ${mixarr};">No.${j+1} ${mixarr} <br><br>${txt}</p>
        </div>`;
}
document.querySelector('.mama').innerHTML = hstr;
console.log(hstr);
</script>

马黑黑 发表于 2022-4-11 18:01

HTML代码举例：

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

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

马黑黑 发表于 2022-4-11 18:36

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

马黑黑 发表于 2022-4-11 18:36

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

东篱闲人 发表于 2022-4-11 18:42

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




这个代码好像不咋灵啊。。。{:5_115:}

马黑黑 发表于 2022-4-11 18:47

东篱闲人 发表于 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 19:03

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

        .bgBox { margin: 10px auto ...

这个很灵！{:5_116:}

马黑黑 发表于 2022-4-11 19:09

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

对的，必须有CSS帮忙

东篱闲人 发表于 2022-4-11 19:15

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

字体大小在哪里调节？

东篱闲人 发表于 2022-4-11 19:20

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

加林森 发表于 2022-4-11 19:30

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

马黑黑 发表于 2022-4-11 19:37

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

好的

马黑黑 发表于 2022-4-11 19:43

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

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

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

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

东篱闲人 发表于 2022-4-11 19:45

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

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


收到{:5_112:}

马黑黑 发表于 2022-4-11 19:46

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

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

红影 发表于 2022-4-11 22:39

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

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

马黑黑 发表于 2022-4-12 07:37

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

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

红影 发表于 2022-4-13 19:21

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

饿呢你，这个非常直观。黑黑太棒了{:4_199:}

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

马黑黑 发表于 2022-4-13 19:39

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

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

首先，俺不饿，因为俺们木有封村{:4_189:}

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

红影 发表于 2022-4-15 07:53

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

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

哈哈，发现我总错这个字，让你饿了好几回了{:4_173:}

同样的背景同样的字体，这种情况下的比较最直接了呢。
页: [1] 2
查看完整版本: 文本在图片之上的mix-blend-mode16种滤镜效果比较