svg作为css的background,导致fill不支持十六进制?-灵析社区

强哥喝假酒

下面的代码中,我把svg作为css的background,发现fill属性如果写blue之类的单词,会显示正确的颜色,但换成十六进制,如#acd123,就无效. 但是如果把相同的svg写在body里面,即作为html标签使用,fill里写十六进制的颜色,能正确显示相应颜色. 所以问题来了,把svg作为css背景的情况下,svg下的rect的fill如何才能支持十六进制颜色的写法? .svg{ box-sizing: border-box; width: 100px; height: 100px; background: url("data:image/svg+xml,"); } svg的fill颜色 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241001/8362b2728bbb892ef360a20d8e90bae8.png)

阅读量:132

点赞量:0

问AI
我想对你说
试了一下确实不行。 猜测可能因为svg作为背景的时候css 没法主动处理内部属性,只能识别颜色名称 16进制无法识别; 提供另一个思路:把16进制颜色在线转为rgb形式写入可以出现 例如:#acd123 => rgb(172, 209, 35) 是可以实现效果的