html 文字在背景图片上,如何让文字作为CSS背景图片显示

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

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

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

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

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

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

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

background: url(zhangxinxu.svg);

}

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

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

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

文字内容

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

background-image: url('文字内容');

}

由于安全性限制，目前需要对部分字符进行转义，因此，实际的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代码，HTML和CSS中均可内联使用。

最下面是预览区域。

如果需要其他配置项

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

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

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

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

代码演示如下截图所示：

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

三、文字背景图应用案例

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

1. 水印

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

相关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");

}

截图效果如下所示：