SVG 背景图像在 Firefox 伪元素中不显示
在 CSS 中,您可以使用 background- 为伪元素指定背景图像 -图像属性。然而,当使用数据图像时,就像 SVG 图像一样,Firefox 无法正确显示图像。
原因:
根本原因在于使用数据 URL 中的哈希字符 (#)。在 URL 中,哈希字符被保留以指示片段标识符的开始。
解决方案:
要解决此问题,请在数据中对哈希字符进行编码URL 将其转换为#。操作方法如下:
background-image: url('data:image/svg+xml;utf8,<svg version="1.1">
通过对哈希字符进行编码,您可以确保它被正确解释为数据 URL 的一部分,而不是元素内的标识符。此更改应该可以解决问题,并且 SVG 图像应该在 Firefox 中的伪元素中正确显示为背景。
以上是为什么我的 SVG 背景图像在 Firefox 伪元素中不显示?的详细内容。更多信息请关注PHP中文网其他相关文章!