在理论开发中，有时候心愿文字内容能够作为背景图片显示，一方面是心愿利用背景图片的劣势，例如能够平铺，另外一方面是常见的替换元素不能应用伪元素创立文字，此时只能寄心愿与背景图。

要害如何把文字变成背景图呢？

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

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

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

SVG尽管是XML语言形成的，然而实质上就是一个图像，是能够作为图像应用的，例如：

<img src="zhangxinxu.svg">

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

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

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

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

例如上面是一段显示文本的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)"会让文字不可见。

<text>元素也能围绕中心点变换有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");}

截图成果如下所示：