关于css:如何让文字作为CSS背景图片显示

54次阅读

共计 2182 个字符，预计需要花费 6 分钟才能阅读完成。

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

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

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

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

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 代码，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 个参数就须要设置为容器元素的宽高的一半能力让文字居中旋转。

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

例如为避免截图，会给页面，或者聊天软件背景等减少文字水印。
相干 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");
}

截图成果如下所示：

正文完