svg generates page watermark

svg generates page watermark

1. Generate svg

Quickly generate a fast channel through this channel.
Use the safe escaped

2. Use

.content{
    
    
    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)'%3E这是水印%3C/text%3E%3C/svg%3E") repeat;
}

3. Effect

reference

The main reference of this article: How does Zhang Xinxu blog show text as a CSS background image?