如何让文字作为CSS背景图片显示？ « 张鑫旭-鑫空间-鑫生活

这篇文章发布于 2020年10月20日，星期二，01:26，归类于 CSS相关, SVG相关。阅读 32508 次, 今日 14 次 19 条评论

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9615
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

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

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

通常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中是没有的。

代码演示如下截图所示：