HTML分层文字背景图片,如何让文字作为CSS背景图片显示？

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

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

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

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

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

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

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

.example {

background: url(zhangxinxu.svg);

}

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

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

关于这个特性，可以参考我之前的这篇文章：“CSS中内联SVG图片有比Base64更好的形式”。

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

文字内容

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

.by-zhangxinxu {

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

}

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

.exmaple {

background-image: url("data:image/svg