在CSS中直接使用SVG代码做背景

马黑黑

<style> .box { width: 400px; height: 400px; background: url('data:image/svg+xml,\ <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">\ <circle cx="100" cy="100" r="80" fill="none" stroke="orange" stroke-width="4" />\ <circle cx="100" cy="100" r="50" fill="none" stroke="orange" stroke-width="4" />\ <circle cx="100" cy="100" r="20" fill="none" stroke="orange" stroke-width="4" />\ </svg>') no-repeat center/cover; margin: 20px auto; position: relative; } </style> <div class="box"></div>

马黑黑

符号 \ 是分行写 svg 代码而加入的，如果连在一行写，可以不要，像这样：

background: url('data:image/svg+xml,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="none" stroke="orange" stroke-width="4" /><circle cx="100" cy="100" r="50" fill="none" stroke="orange" stroke-width="4" /><circle cx="100" cy="100" r="20" fill="none" stroke="orange" stroke-width="4" /></svg>') no-repeat center/cover;

分行写是为了方便阅读和修改。

马黑黑

我们可以使用径向渐变背景实现类似的功能：

<style> .box { width: 400px; height: 400px; background: repeating-radial-gradient( transparent 0 6%, green 6.2% 10%, transparent 10.2% 20% ); border-radius: 50%; margin: 20px auto; position: relative; } </style> <div class="box"></div>

花飞飞

这次的径向渐变加了个重复。。
所以本来只看到一条的，现在看到好多条。。
0-6透明，6.2-10绿色，这个0.2是消锯齿用的

花飞飞

一楼是直接在背景里画同心圆，半径不同，圆心位置100.100，颜色相同。。
这个画了三个就出现了三个。。

马黑黑

花飞飞 发表于 2025-8-16 13:16
一楼是直接在背景里画同心圆，半径不同，圆心位置100.100，颜色相同。。
这个画了三个就出现了三个。。

而且尺寸可以和元素不一致（不过要考虑伸缩的环线大小），同时放大缩小不会失真

马黑黑

花飞飞 发表于 2025-8-16 13:13
这次的径向渐变加了个重复。。
所以本来只看到一条的，现在看到好多条。。
0-6透明，6.2-10绿色，这个0.2 ...

多少条看最后色标比例（或其它尺寸按比例计算）。最后一个颜色最后色标边界 20%，意味着里面的东东按这个比例重复，重复呈现出来的效果则依据元素尺寸和简便图案的设计

红影

用SVG画的圆需要给圆心、半径以及线宽。通过不同半径得到3个同心圆。
重复径向渐变好像更简单点，只要给出透明色和所需颜色的间隔就可以了，通过重复，可以得到一组同心圆。

马黑黑

红影 发表于 2025-8-16 13:30
用SVG画的圆需要给圆心、半径以及线宽。通过不同半径得到3个同心圆。
重复径向渐变好像更简单点，只要给出 ...

SVG圆更容易掌握，就是代码略多一点点

红影

渐变的那种，每个圆占用的位置接近14%，当然第一个圆很小，这样计算下来就是4道圆环。如果把占比调小，圆环数量还会多点。

杨帆

漂亮，谢谢马老师经典探索

红影

马黑黑 发表于 2025-8-16 13:32
SVG圆更容易掌握，就是代码略多一点点

是的，因为更符合常规的思路。

马黑黑

红影 发表于 2025-8-16 18:15
是的，因为更符合常规的思路。

渐变背景也是常规思路的

红影

马黑黑 发表于 2025-8-16 20:09
渐变背景也是常规思路的

svg画圆的过程更容易理解

花飞飞

马黑黑 发表于 2025-8-16 13:25
而且尺寸可以和元素不一致（不过要考虑伸缩的环线大小），同时放大缩小不会失真

放大小缩不会失真，这个特点太棒了。。

花飞飞

马黑黑 发表于 2025-8-16 13:27
多少条看最后色标比例（或其它尺寸按比例计算）。最后一个颜色最后色标边界 20%，意味着里面的东东按这个 ...

最后色标边界可以决定圈数的多少了，这个好，如果想要多一点或者少一点的圈圈就可以任意设了

马黑黑

花飞飞 发表于 2025-8-16 20:38
最后色标边界可以决定圈数的多少了，这个好，如果想要多一点或者少一点的圈圈就可以任意设了

但是要计算一下

马黑黑

花飞飞 发表于 2025-8-16 20:36
放大小缩不会失真，这个特点太棒了。。

矢量图SVG

花飞飞

马黑黑 发表于 2025-8-16 21:25
但是要计算一下

根据贴子需要估计一下

花飞飞

马黑黑 发表于 2025-8-16 21:25
矢量图SVG

优势很明显