首頁 >web前端 >css教學 >為什麼我的 SVG 資料 URL 不能在 Firefox 中用作偽元素背景?

為什麼我的 SVG 資料 URL 不能在 Firefox 中用作偽元素背景?

Barbara Streisand
Barbara Streisand原創
2024-12-31 15:19:16359瀏覽

Why Doesn't My SVG Data URL Work as a Pseudo-Element Background in Firefox?

SVG 資料影像不能用作偽元素中的背景影像

在某些情況下,將SVG 設定為背景影像對於使用data :image/svg xml URL 的偽元素,可能無法在Firefox 中呈現。出現這種情況是因為 URL 中的 # 字元被解釋為片段標識符的開頭。

對資料 URL 進行編碼

要解決此問題並允許 SVG在Firefox中顯示時,需要對資料URL內容進行編碼。這涉及將資料 URL 中的任何哈希 (#) 字元轉換為 #。

以下是修改後的程式碼範例:

content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 12px;

以上是為什麼我的 SVG 資料 URL 不能在 Firefox 中用作偽元素背景?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn