如何添加CSS 文字背景水印

这里给大家介绍一种实用的技术，可以让文字作为CSS背景图片。利用 SVG 来给界面添加背景水印

语法结构

<img src="zhangxinxu.svg">

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

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

由于安全性限制，目前需要对部分字符进行转义。因此，给大家介绍一个在线工具，可以将普通的文字转换为SVG

SVG文字背景图生成工具：https://www.zhangxinxu.com/sp/svg-text.php

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E这是提示文字%3C/text%3E%3C/svg%3E

.example {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E这是提示文字%3C/text%3E%3C/svg%3E")
}