让 color 自动适配背景色？分享 1 段优质 CSS 代码片段！

内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 1400+ 字，整篇阅读约需 2 分钟。

今天分享一段优质 CSS 代码片段，让文本和背景色混合产生一种独特的效果，就像下图这种。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

<div class="banner">
    <h1 class="title">每日分享一段优质代码片段，欢迎关注与投稿！</h1>
</div>

.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;
    /* 关键点 */
    mix-blend-mode: difference; 
}

分享原因

这段代码展示了如何使用 CSS 和 HTML 创建一个带有背景图片和标题文本的横幅（banner），并且通过 mix-blend-mode: difference; 为标题文本添加混合模式效果。

mix-blend-mode 属性可以为元素设置混合模式，使其颜色与背景颜色混合，从而创建有趣的视觉效果。

这个效果在设计中很常见，能增加页面的视觉吸引力，强调和突出文本内容。

代码解析

1. banner 类

设置背景元素基础样式。

定义背景图片，以及让文本垂直水平居中对齐。

2. mix-blend-mode: difference;

这是一个关键设置。

使用了 mix-blend-mode: difference; ，这意味着标题文字的颜色将与其父元素（.banner）的背景颜色进行差值计算，产生类似于反相的效果。

在这种情况下，由于父元素（.banner）的背景是白色，而文字原本的颜色是白色，通过差值计算后，文字颜色就变成了黑色，从而让白色文字在白色背景上也能够显示。

3. mix-blend-mode 属性详解

mix-blend-mode CSS 属性描述了元素的内容应该与其直系父元素的内容和元素的背景如何混合。

它允许创建各种视觉效果，例如半透明效果、阴影、图片蒙版等。

以下是兼容性：

以下是一些常见的属性值：

normal：这是默认值，使用正常的颜色混合模式，不产生特殊混合效果。

multiply：将两个颜色的值相乘，会得到一个更暗的颜色，常用于创建阴影效果。

screen：将两个颜色的值相加，然后减去相乘的值，会得到一个更亮的颜色，可用于创建高光效果。

overlay：根据背景颜色的亮度来选择颜色混合模式。如果背景颜色较暗，则使用 multiply 模式；如果背景颜色较亮，则使用 screen 模式。

darken：将两个颜色的值进行比较，使用较暗的那个颜色。

lighten：与 darken 相反，使用较亮的那个颜色。

color-dodge：将前景色分解为 RGB 分量，并将每个分量分别除以（1 减去背景色的对应分量），然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色。这种模式会使颜色变亮。

color-burn：将前景色分解为 RGB 分量，并将每个分量分别除以背景色的对应分量，然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色。它会使颜色变暗。

difference：将前景色减去背景色的值，并取绝对值，会导致一种反相的效果。

exclusion：将前景色和背景色的值相加，然后减去相乘的值的两倍，常用于创建反相效果，但其对比度比 difference 更低，颜色更柔和。

hue：将前景色的色相（hue）与背景色的饱和度（saturation）和亮度（lightness）混合，可在不改变亮度和饱和度的情况下改变颜色。

saturation：将前景色的饱和度与背景色的色相和亮度混合，用于在不改变颜色的情况下改变饱和度。

color：将前景色的色相、饱和度和亮度与背景色混合，会在改变所有颜色属性的情况下改变前景色的颜色。

luminosity：将前景色的亮度与背景色的色相和饱和度混合，可在不改变颜色的情况下改变亮度。

晚，前端程序员阿锋刚刚回到家，经理便打来电话说道：我们的网站首页要调整成黑白色，辛苦加个班实现一下吧！很多时候总会遇到一些突发事件需要网站首页均呈灰色。那要如何让网页变灰呢？

阿锋首先想到：图片方面的内容只要换一个图片就好，其他的就是靠控制 css 来进行改变。但是一个网站有很多个css, 那么多的元素都有自己的颜色,整体变灰的工作量大，效率低。所以要有简便快捷的方法。

方案1

sass / less 等 css预编译语言来解决
再用这些 css预编译语言来开发的时候, 一般会根据主色调来定义一些颜色变量
$globalColor: gray;
$globalBtnColor: gray;
// ...
当修改变量的时候, 就会导致整个网站的主色调改变颜色

但是，因为 sass / less 都是开发阶段使用的内容
一旦修改, 就需要从新编译打包成新的文件进行服务器部署，会相对比较麻烦
而且一些细节的地方可能会遗漏掉 (比如没有用全局变量的地方)

方案二

为了简单一些, 快速一些操作，而且过段时间还要变回来，所以可以采取滤镜的方式
一个非常简单的 css 代码
filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
可以选择直接改 css 文件, 把滤镜添加到 html 标签
html {
filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
也可以直接修改 html 文件, 把css 样式以行内式的方式添加到 html 标签上
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

这样就简单高效的实现了网页的黑白灰色调。

角边框：

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了

border-radius属性用于设置元素的外边框圆角。

语法：

border-radius: length;

盒子阴影：

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

文字阴影：

在CSS3中，我们可以使用text-shadow属性将阴影应用于文字

text-shadow： h-shawow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

在线咨询

上一篇：元氏县医疗保障局城乡居民医保办事明白纸
下一篇：window弹出、提示框

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

让 color 自动适配背景色？分享 1 段优质 CSS 代码片段！

方案1

方案二

角边框：

盒子阴影：

文字阴影：

您的项目需求