CSS一行代码实现文字智能适配背景效果

七夏发表于 2024-12-30 12:32:26

<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/gehCsfcwMoaKAoGt5Gwk9oqe0uvqX0qv3jcSNXeotoQeNRTNbKjibQmliae9UbXY8vDZGBqf5oicNCv4vD1HibJI0Q/640?wx_fmt=gif&random=0.06999833144469547&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
▲ 演示gif
看上面这个神奇的效果，文字在黑色背景里面显示为白色，而在白色的背景里面显示为黑色，这就是文字智能适配背景。
实现文字智能适配背景效果通常指的是让文字的颜色或样式根据背景颜色的变化而自动调整，以达到最佳的视觉可读性和美观性。
看到这样的需求，大多数人第一时间想到的是，文字元素有两个，是完全重叠的两层，一层是黑色，一层是白色，然后通过遮罩实现；或者使用JavaScript来动态计算背景颜色并调整文字颜色，可以通过分析背景颜色的亮度来决定使用深色还是浅色文字。没错，这样的确可以实现这样的效果，但是实现起来很复杂也不智能。
那么，今天我就带领大家使用CSS一行代码就可以实现这样的效果。那下面就开始吧！
一、实现过程
为了简单我们直接使用背景图构建元素容器，如下：
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMoaKAoGt5Gwk9oqe0uvqX0qv8lKw7R1R7AbBbfcwsSqvKqtxR7nVDFyVT96G47WkqEM8oNSpmOPPMQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
<pre><code><div class="banner">
 <h1 class="title">前端技术营，致力于分享前端编程知识干货</h1>
</div>
</code></pre>
<pre><code>.banner {
 height: 230px;
 background-image: url(./img/banner.png);
 background-repeat: no-repeat;
 background-size: 100% 230px;
 line-height: 230px;
 text-align: center;
}
.title {
 margin: 0;
 color: #fff;
 font-size: 50px;
 transition: .5s;
}
.banner:hover .title {
 transform: translateX(-150px);
}
</code></pre>
效果如下：
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMoaKAoGt5Gwk9oqe0uvqX0qvibmgyRtqbt3f8pGU4sYBXskLiaISibK5VZUUiaG002rXNHpEI3JderaMAw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
此时文字颜色不管在背景为白色还是黑色区域都显示为白色。
下面重点来了！！！
我们只需在 .title 上加上如下一个CSS属性就可以实现文字在白色区域显示为黑色，而在黑色区域显示为白色的效果。
<pre><code>mix-blend-mode: difference;
</code></pre>
效果如下：
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMoaKAoGt5Gwk9oqe0uvqX0qv2n0Me6YRv68g8s3JM2MS70gfhdODO9qqVo3WaUJicskRXmfAx9GQY4g/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
我们只用了mix-blend-mode: difference; 这一行CSS就实现这个效果，那么这个CSS属性究竟有何神奇之处呢？
二、mix-blend-mode属性分析
mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
此属性允许元素内容（如文本、图像、矢量图形等）与底层背景或相邻元素之间进行丰富多样的颜色混合，从而创造出独特、细腻且极具艺术感的视觉效果。
mix-blend-mode有16个值，分别如下：
<ul>
<li>**normal：默认值。**默认的混合模式，不进行特殊混合，相当于没有混合。</li>
<li>**multiply：正片叠底。**将当前元素中的颜色与直属父元素的颜色的每一个分量进行相乘，一般情况下，计算后的结果颜色比原本的颜色更暗。</li>
<li>**screen：滤色。**当前元素的颜色与直属父元素的颜色的互补色相乘，然后取反。一般情况下，计算后的结果颜色比原本的颜色更亮。</li>
<li>**overlay：叠加。**对于直属父元素的颜色较暗的区域，使用 multiply 模式；对于直属父元素的颜色较亮的区域，使用 Screen 模式。</li>
<li>**darken：变暗。**对于每个像素位置，取当前元素的颜色与直属父元素的颜色中较暗的那个颜色作为结果颜色。</li>
<li>**lighten：变亮。**对于每个像素位置，取当前元素的颜色与直属父元素的颜色中较亮的那个颜色作为结果颜色。</li>
<li>**color-dodge：颜色减淡。**当前元素的颜色根据直属父元素的颜色信息中的亮度调整自身亮度，使得结果颜色变亮。</li>
<li>**color-burn：颜色加深。**与Color-Dodge相反，当前元素的颜色根据直属父元素的颜色信息中的亮度调整自身亮度，使得结果颜色变暗。</li>
<li>**hard-light：强光。**作用于直属父元素的颜色。当前元素的颜色类似于一个光源，对直属父元素的颜色施加明暗影响。</li>
<li>**soft-light：柔光。**当前元素的颜色对直属父元素的颜色的明暗影响较小，类似于半透明。</li>
<li>**difference：差值。**计算当前元素的颜色与直属父元素的颜色之间的色差，结果为两者之间的对比色。</li>
<li>**exclusion：排除。**与 difference 类似，但产生的对比度较低；结果颜色比 difference 模式更柔和，且不会出现纯黑色或纯白色。</li>
<li>**hue：色相。**取当前元素的颜色信息中的色相与直属父元素的颜色信息中的饱和度和亮度，生成新的颜色；直属父元素的颜色信息中的色调被当前元素的颜色信息中的色调替换，但饱和度和亮度保持不变。</li>
<li>**saturation：饱和度。**取直属父元素的颜色信息中的色相与亮度，以及当前元素的颜色信息中的饱和度，生成新的颜色；直属父元素的颜色信息中的饱和度被当前元素的颜色信息中的饱和度替换，其他属性保持不变。</li>
<li>**color：颜色。**取当前的颜色信息中的色相与饱和度，以及直属父元素的颜色信息中的亮度，生成新的颜色；直属父元素的颜色信息中的色调和饱和度被当前元素的颜色信息中的色调和饱和度替换，亮度保持不变。</li>
<li>**luminosity：亮度。**取当前元素的颜色信息中的亮度，与直属父元素的颜色信息中的色相和饱和度结合，生成新的颜色；直属父元素的颜色信息中的亮度被当前元素的颜色信息中的亮度替换，色调和饱和度保持不变。</li>
</ul>
结合以上知识，我们知道了difference的作用，其流程如下：
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMoaKAoGt5Gwk9oqe0uvqX0qvibdkicjbyprialXpn5gwJ3DYaJmdbOlLVX3EfibalywY3kARdw7FdxKcNw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
计算当前元素的颜色与直属父元素的颜色之间的色差，结果为两者之间的对比色，也就是文字在不同背景区域显示的颜色。
当文字颜色为blue时，效果如下：
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMoaKAoGt5Gwk9oqe0uvqX0qvIhOB1Os5jkHiaFcT8FH666RmAjob5H5zrmq6ibVjd1uFLuM1PENxgJwg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
三、实例
1、使用mix-blend-mode: multiply效果：
<pre><code><div class="banner">
 <img class="img1" src="./img/img2.jpeg" alt="" />
 原图展示效果
</div>

<div class="banner">
 <img class="img2" src="./img/img2.jpeg" alt="" />
 mix-blend-mode: multiply;展示效果
</div>
</code></pre>
<pre><code>.banner {
 display: inline-block;
 margin: 0 60px;
 background-color: aquamarine;
 padding: 50px;
}
.img1 {
 width: 400px;
 height: 400px;
}
.img2 {
 width: 400px;
 height: 400px;
 mix-blend-mode: multiply;
}
</code></pre>
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMoaKAoGt5Gwk9oqe0uvqX0qvjicLeb8dORzdewGFkEwhZvYhVYCfkLegoedRxp4nKTC33UZHat6XZ9A/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
2、使用mix-blend-mode: lighten;效果：
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMoaKAoGt5Gwk9oqe0uvqX0qvp3A9Zt4mBicJv8mHKPS42KQ9icLW8DSqxwk27ucJtnZfZgDjNhEzq4yw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
3、使用mix-blend-mode: color;效果：
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMoaKAoGt5Gwk9oqe0uvqX0qvhR65MSzicxSOpCz2L9SHicMOrjno3aibJAllFcticFgnB4KaHuez9icfMvA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
混合模式及其色彩方面的知识还有很多，这里就不做过多的展开了。
这个属性还是很有意思的，大家可以研究学习一下。
兼容如下：
<img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/gehCsfcwMoaKAoGt5Gwk9oqe0uvqX0qv7OTYuiaC0tRjUuQkZKXmdwCvsQw2dpJibq2gm4ibAW0ZlIx7DicibSgic6Sw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" />
总结
在追求视觉表现力与交互体验日益精进的网页设计领域，CSS属性 mix-blend-mode以其强大的颜色混合功能脱颖而出，为设计师们打开了新的创意之门。无论是文本与背景的艺术融合、图像叠加与滤镜效果的实现、复杂背景图案的构建，还是UI组件视觉强化、动态交互效果的创造以及响应式设计的优化，mix-blend-mode都展现出无与伦比的实用价值与艺术魅力。

梦淡如非 发表于 2024-12-30 12:49:51

好复杂

页: [1]

3BBS's Archiver

CSS一行代码实现文字智能适配背景效果