如何让文字作为CSS背景图片显示（转）

程序员苏小胖 07-27 101

前言：

如今兄弟们对“css矢量”大致比较着重，朋友们都需要剖析一些“css矢量”的相关资讯。那么小编同时在网络上收集了一些有关“css矢量””的相关文章，希望同学们能喜欢，我们快快来学习一下吧！

今天小胖在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=";>    <text>文字内容</text></svg>

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

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

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

.exmaple {    background-image: url("data:image/svg+xml,%3Csvg xmlns=';%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图片实现，现在可以直接代码内联，例如点击下面这个按钮，大家就可以看到我这篇文章的实时水印效果了。

不要害怕，用力点击我