23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。

简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。

其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。

其功能能够涵盖：

• 精简
• 调暗
• 饱和度
• 降低饱和度
• 色度增强
• 调整不透明度
• 反转
• 补充
• 转换
• 对比度
• 调色板

当然，今天我们不会一个一个去过这些功能，更多的时候，我们只需要知道我们能够实现这些功能。

本文，我们将从实际实用角度出发，基于实际的案例，看看 CSS 相对颜色，能够如何解决我们的一些实际问题。

快速语法入门

首先，我们通过一张图，一个案例，快速入门 CSS 相对颜色语法：

相对颜色语法的目标是允许从另一种颜色派生颜色。

上图显示了将原始颜色 green 转换为新颜色的颜色空间后，该颜色会转换为以 r、g、b 和 alpha 变量表示的各个数字，这些数字随后会直接用作新的 rgb() 颜色的值。

举个例子：

<p> CSS Relative Color </p>

p {
    color: rgb(255, 0, 0);
}

实现一个 color 为红色（rgb 值为 rgb(255, 0, 0)）的字体：

基于上面的相对颜色语法，我如何通过一个红色生成绿色文字呢？示意如下：

p {
    --color: rgb(255, 0, 0);
    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result = rgb(0, 255, 0) */
}

效果如下，我们就得到绿色字体：

解释一下：

1. 原本的红色颜色，我们把它设置为 CSS 变量 --color: rgb(255, 0, 0)
2. 想通过红色得到绿色，对于红色的 rgb 值 rgb(255, 0, 0) 而言，需要转换成 rgb(0, 255, 0)
3. 使用 CSS 相对颜色语法，就是 rgb(from var(--color) calc(r - 255) calc(g + 255) b)

通过这个 DEMO，我们把几个核心基础语法点学习一下：

1. from 关键字

from 关键字，它是相对颜色的核心。它表示会将 from 关键字后的颜色定义转换为相对颜色！在 from 关键字后面，CSS 会期待一种颜色，即能够启发生成另一种颜色。

2. from 关键字 后的颜色表示，支持不同颜色表示或者是 CSS 变量

第二个关键点，from 后面通常会接一个颜色值，这个颜色值可以是任意颜色表示法，或者是一个 CSS 变量，下面的写法都是合法的：

p {
    color: rgba(from #ff0000) r g b);
    color: rgb(from rgb(255, 0, 0) r g b);
    color: rgb(from hsl(0deg, 100%, 50%) r g b);
    color: rgb(from var(--hotpink) r g b);
}

3. 对转换后的变量使用 calc() 或其他 CSS 函数

另外一个非常重要的基础概念就是，我们可以对 (from color r g b) 后的转换变量 r g b 使用 calc() 或其他 CSS 函数。

就是我们上面的例子：

p {
    --color: rgb(255, 0, 0);
    color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);  /* result = rgb(0, 255, 0) */
}

4. 相对颜色语法支持，各种颜色表示函数：

相对颜色的基础的使用规则就是这样，它不仅支持 rgb 颜色表示法，它支持所有的颜色表示法：

• sRGB 颜色空间：hsl()、hwb()、rgb()；
• CIELAB 颜色空间：lab()、lch()；
• Oklab 颜色空间：oklab()、oklch()；

使用 CSS 相对颜色，实现统一按钮点击背景切换

通常页面上的按钮，都会有 hover/active 的颜色变化，以增强与用户的交互。

像是这样：

最常见的写法，就是我们需要在 Normal 状态、Hover 状态、Active 状态下写 3 种颜色：

p {
    color: #ffcc00;
    transition: .3s all;
}
/* Hover 伪类下为 B 颜色 */
p:hover {
    color: #ffd21f;
}
/** Active 伪类下为 C 颜色 **/
p:active {
    color: #ab8a05;
}

在之前，我们介绍过一种利用滤镜 filter: contrast() 或者 filter: brightness() 的统一解决方案，无需写多个颜色值，可以根据 Normal 状态下的色值，通过滤镜统一实现更亮、或者更暗的伪类颜色。

在今天，我们也可以利用 CSS 相对颜色来做这个事情：

div {
    --bg: #fc0;
    background: var(--bg);
    transition: .3s all;
}

div:hover {
    background: hsl(from var(--bg) h s calc(l * 1.2));
}
div:active {
    background: hsl(from var(--bg) h s calc(l * 0.8));
}

我们通过 hsl 色相、饱和度、亮度颜色表示法表示颜色。实现：

1. 在 :hover 状态下，根据背景色，将背景亮度 l 调整为原背景色的 1.2 倍
2. 在 :avtive 状态下，根据背景色，将背景亮度 l 调整为原背景色的 0.8 倍

在实际业务中，这是一个非常有用的用法。

使用 CSS 相对颜色，实现文字颜色自适应背景

相对颜色，还有一个非常有意思的场景 -- 让文字颜色能够自适应背景颜色进行展示。

有这么一种场景，有的时候，无法确定文案的背景颜色的最终表现值（因为背景颜色的值可能是后台配置，通过接口传给前端），但是，我们又需要能够让文字在任何背景颜色下都正常展现（譬如当底色为黑色时文字应该是白色，当背景为白色时，文字应该为黑色）。

像是这样：

在不确定背景颜色的情况下，无论什么情况，文字颜色都能够适配背景的颜色。

在之前，纯 CSS 没有特别好的方案，可以利用 mix-blend-mode: difference 进行一定程度的适配：

div {
    // 不确定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

实操过这个方案的同学都会知道，在一定情况下，前景文字颜色还是会有一点瑕疵。并且，混合模式这个方案最大的问题是会影响清晰度。

有了 CSS 相对颜色后，我们有了更多的纯 CSS 方案。

利用 CSS 相对颜色，反转颜色

我们可以利用相对颜色的能力，基于背景色颜色进行反转，赋值给 color。

一种方法是将颜色转换为 RGB，然后从 1 中减去每个通道的值。

代码非常简单：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b));  /** 基于背景反转颜色 **/
}

用 1 去减，而不是用 255 去，是因为此刻，会将 rgb() 表示法中的 0~255 映射到 0~1。

效果如下：

配个动图，我们利用背景色的反色当 Color 颜色，适配所有背景情况：

完整的 DEMO 和代码，你可以戳这里：CodePen Demo -- CSS Relatvie Color Adapt BG

当然，这个方案还有两个问题：

1. 如果颜色恰好是在 #808080 灰色附近，它的反色，其实还是它自己！会导致在灰色背景下，前景文字不可见；
2. 绝大部分情况虽然可以正常展示，但是并不是非常美观好看

为了解决这两个问题，CSS 颜色规范在 CSS Color Module Level 6 又推出了一个新的规范 -- color-contrast()。

利用 color-contrast()，选择高对比度颜色

color-contrast() 函数标记接收一个 color 值，并将其与其他的 color 值比较，从列表中选择最高对比度的颜色。

利用这个 CSS 颜色函数，可以完美的解决上述的问题。

我们只需要提供 #fff 白色和 #000 黑色两种可选颜色，将这两种颜色和提供的背景色进行比较，系统会自动选取对比度更高的颜色。

改造一下，上面的代码，它就变成了：

p {
    /** 任意背景色 **/
    --bg: #ffcc00;
    background: var(--bg);

    color: color-contrast(var(--bg) vs #fff, #000);  /** 基于背景色，自动选择对比度更高的颜色 **/
}

这样，上面的 DEMO 最终效果就变成了：

此方案的优势在于：

1. 可以限定前景 color 颜色为固定的几个色值，以保证 UI 层面的统一及美观
2. 满足任何情况下的背景色

当然，唯一限制这个方案的最大问题在于，当前，color-contrast 还只是一个实验室功能，未大规模被兼容。

总结一下

到今天，我们可以利用 CSS 提供的各类颜色函数，对颜色有了更为强大的掌控力。

很多交互效果，不借助 JavaScript 的运算，也能计算出我们想要的最终颜色值。本文简单的借助：

1. 使用 CSS 相对颜色，实现统一按钮点击背景切换
2. 使用 CSS 相对颜色，实现文字颜色自适应背景

两个案例，介绍了 CSS 相对颜色的功能。

原文链接：https://juejin.cn/post/7321410822789742618

天小胖在coding的时候，遇到一个问题，就是要使用一个动态的文本作为div的背景，想着使用绝对定位堆叠来实现，或者伪元素实现，终归不够优雅，直到看到张鑫旭大佬的这篇文章，只能说，很当优雅！

在实际开发中，有时候希望文字内容可以作为背景图片显示，一方面是希望利用背景图片的优势，例如可以平铺，另外一方面是常见的替换元素不能使用伪元素创建文字，此时只能寄希望与背景图。

关键如何把文字变成背景图呢？

通常CSS开发人员的做法是把文字导出来转换成图片，然后作为背景图显示，但是这样成本有些高，也不利于日后的维护。

这里给大家介绍一种实用的技术，可以让文字作为CSS背景图片。

一、SVG本质上就是一个图像

SVG虽然是XML语言构成的，但是本质上就是一个图像，是可以作为图像使用的，例如：

<img src="zhangxinxu.svg">

此时的zhangxinxu.svg就是一个图像，同样的，也可以作为背景图显示，例如：

.example {
    background: url(zhangxinxu.svg);
}

但是，这里的SVG文件都是独立的SVG文件，和把文字导出成PNG图片没有任何区别，根本没有意义嘛！

对的，请不用急，是这样的，SVG作为一个矢量图像，和通常的位图有一点不一样，那就是SVG图像可以直接以源代码的方式内联在Web页面中。

关于这个特性，可以参考我之前的这篇文章：“学习了，CSS中内联SVG图片有比Base64更好的形式 � 张鑫旭-鑫空间-鑫生活”。

例如下面是一段显示文本的SVG代码：

<svg xmlns="http://www.w3.org/2000/svg">
    <text>文字内容</text>
</svg>

是可以直接作为background-image使用的，例如：

.by-zhangxinxu {
    background-image: url('<svg xmlns="http://www.w3.org/2000/svg"><text>文字内容</text></svg>');
}

由于安全性限制，目前需要对部分字符进行转义，因此，实际的CSS代码是这样的：

.exmaple {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext%3E文字内容%3C/text%3E%3C/svg%3E");
}

相比PNG图像的文字背景，使用SVG内联的好处在于，我们可以轻松修改文字的内容，同时我们可以随意设置文字的字号大小，颜色、描边效果等等。

但是，每次都手写一段SVG代码好难哦，尤其很多前端小伙伴对SVG并不是很熟悉。

不要紧，考虑到这种情况存在，我专门做了一个生成SVG文字背景图的工具。

二、SVG文字背景图生成工具

您可以狠狠地点击这里：文字转SVG图像在线转换工具 » 张鑫旭-鑫空间-鑫生活

界面截图示意如下：

最上面是配置区域，可以设置作为背景的文字内容，可以设置文字的颜色、透明度以及位置等信息。

中间是代码区，左侧是原始SVG，可以点击图标下载SVG文件到本地；右侧是转义的可以直接内联使用的SVG代码，HTML和CSS中均可内联使用。

最下面是预览区域。

如果需要其他配置项

实际开发中的需求是千变万化的，工具目前内置的配置项不一定能覆盖所有的场景，此时可以这么处理，直接修改左侧文本域中的SVG代码，此时右侧的转义SVG代码会自动同步，例如，如果我们希望背景文字带有旋转效果，这样可以作为水印图片使用，则可以在已经生成的SVG代码中的元素上设置45度旋转相关的代码。

一种方法是直接在<svg>元素上设置传统DOM元素的CSS style设置，例如：

另外一种方法就是<text>元素上使用SVG元素自动的transform属性进行设置，但是SVG中的transform变换坐标和CSS是很不一样的，直接<text transform="rotate(-45)">是不会有预期的旋转效果的，因为默认SVG的变换中心点是左上角，因此，设置transform="rotate(-45)"会让文字不可见。

关于SVG的transform变换坐标体系可以参考我之前写的这篇文章：“理解SVG transform坐标变换”

<text>元素也能围绕中心点变换有2个方法，一种是使用translate()函数先偏移、然后再旋转，然后在偏移复原，这种方法啰嗦了一点，另外一种方法就是使用SVG中rotate()函数的可选参数，也就是第2个参数，就是可以指定旋转的中心点坐标，这个特性SVG独有，Canvas中是没有的。

代码演示如下截图所示：

其中，可以看到专门设置了SVG元素的width宽和height高，因为如果不设置，按照目前的CSS background-size的尺寸渲染规范，SVG的尺寸会采用容器的尺寸，rotate()函数的第2个参数就需要设置为容器元素的宽高的一半才能让文字居中旋转。

更新于 2022-01-25

dominant-baseline="middle" 只是近似垂直居中，如果 SVG 图片高度较小，会看到往上偏移了一点距离，此时可以试试修改为 dominant-baseline="central"。

三、文字背景图应用案例

这里抛砖引玉，举几个使用文字作为背景图的例子。

1. 水印

例如为防止截图，会给页面，或者聊天软件背景等增加文字水印。

以前几乎都是通过生成一个专门的PNG图片实现，现在可以直接代码内联，例如点击下面这个按钮，大家就可以看到我这篇文章的实时水印效果了。

不要害怕，用力点击我

相关CSS代码如下所示：

.target {
    background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.5' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3Ezhangxinxu.com%3C/text%3E%3C/svg%3E");
}

截图效果如下所示：

2. 输入框其他位置的占位符提示效果

常规的占位符都是在输入框的左上方，或者右上方，如果我们希望提示的占位符在右下角，则就可以使用这里的文本图像技术实现。

比方说下面这个多行文本域输入框，当你输入内容，右下角的提示内容就会消失，没有内容的时候就又会显示（实时效果，可以亲自体验下）。

相关HTML和CSS代码如下所示：

<textarea class="custom-placeholder" required></textarea>

.custom-placeholder {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='100%25' y='96%25' font-size='12' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='end'%3E富强民主文明和谐美丽%3C/text%3E%3C/svg%3E") no-repeat right 10px bottom 5px;
}
.custom-placeholder:valid {
    background: none;
}

因为这里的文本是右对齐，下对齐，因此，设置text-anchor属性值是end，同时x, y属性值都是100%或者接近100%。

3. 视频无法播放提示

HTML5 <video>元素中的视频如果因为地址错误等原因无法播放，是没有办法像普通元素那样写入一段错误提示文字，因为<video>元素是替换元素，写在标签里面的内容都会被忽略。

此时，可以让视频播放出错的时候以背景图的形式显示文字就可以了。

比方说下面这个实时例子，就是一个故意写错了地址的MP4视频，大家可以看到“视频无法预览”的白色提示文字，就是使用这篇文章提供的技术实现的。

相关代码如下所示：

<video src="xxx.png" type="video/mp4" width="360" height="240" onerror="this.classList.add('error')"></video>

video.error{
    background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23ffffff' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E视频无法预览%3C/text%3E%3C/svg%3E") no-repeat center;
}

简单易懂体验绝佳老少皆宜。

四、总结一下

如果想让文字内容直接作为背景图片显示，可以使用SVG元素作为中间桥梁实现。

关键问题是SVG元素的获得不太容易，因此，我就专门给大家开发了一个工具，通过简单配置实现想要的CSS文字背景代码。

同时介绍了如果通过修改左侧输入框得到自定义的文字背景效果。

最后，介绍了3个具有代表性的案例，展示了文字作为背景图片的一些妙用，抛砖引玉，希望可以启发大家在实际开发中的应用。

OK，技术本身并不难，难的是当遇到类似场景的时候可以想到可以直接使用代码实现，而不是导出图片。

好，以上就是本文的全部内容，感谢您的阅读，如果您觉得本文内容还挺有帮助的，欢迎分享。

本文转自张鑫旭大佬的分享，原文地址：如何让文字作为CSS背景图片显示？ � 张鑫旭-鑫空间-鑫生活，张大佬经常分享一些很不错的css idea，推荐大家经常刷刷他的博客，他的书也不错，大家也可以买来读一读！