在实际开发中,有时候希望文字内容可以作为背景图片显示,一方面是希望利用背景图片的优势,例如可以平铺,另外一方面是常见的替换元素不能使用伪元素创建文字,此时只能寄希望与背景图。
关键如何把文字变成背景图呢?
通常CSS开发人员的做法是把文字导出来转换成图片,然后作为背景图显示,但是这样成本有些高,也不利于日后的维护。
这里给大家介绍一种实用的技术,可以让文字作为CSS背景图片。
一、SVG本质上就是一个图像
SVG虽然是XML语言构成的,但是本质上就是一个图像,是可以作为图像使用的,例如:
此时的zhangxinxu.svg就是一个图像,同样的,也可以作为背景图显示,例如:
.example {
background: url(zhangxinxu.svg);
}
但是,这里的SVG文件都是独立的SVG文件,和把文字导出成PNG图片没有任何区别,根本没有意义嘛!
对的,请不用急,是这样的,SVG作为一个矢量图像,和通常的位图有一点不一样,那就是SVG图像可以直接以源代码的方式内联在Web页面中。
关于这个特性,可以参考我之前的这篇文章:“CSS中内联SVG图片有比Base64更好的形式”。
例如下面是一段显示文本的SVG代码:
文字内容
是可以直接作为backg