為什麼我的 SVG 背景圖像在 Firefox 偽元素中不顯示？

SVG 背景影像在Firefox 偽元素中不顯示

在CSS 中，您可以使用background- 為偽元素指定背景影像-圖像屬性。然而，當使用資料影像時，就像 SVG 影像一樣，Firefox 無法正確顯示影像。

原因：

根本原因在於使用資料 URL 中的雜湊字元 (#)。在 URL 中，哈希字元被保留以指示片段標識符的開始。

解決方案：

要解決此問題，請在資料中對雜湊字元進行編碼URL 將其轉換為#。操作方法如下：

background-image: url('data:image/svg+xml;utf8,<svg version="1.1"></svg>

透過對雜湊字元進行編碼，您可以確保它被正確解釋為資料 URL 的一部分，而不是元素內的識別碼。此變更應該可以解決問題，並且 SVG 圖像應該在 Firefox 中的偽元素中正確顯示為背景。

以上是為什麼我的 SVG 背景圖像在 Firefox 偽元素中不顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！