首頁 >web前端 >css教學 >為什麼我的 SVG 資料 URL 背景圖片在 Firefox 中不顯示?

為什麼我的 SVG 資料 URL 背景圖片在 Firefox 中不顯示?

Barbara Streisand
Barbara Streisand原創
2024-12-25 21:07:11220瀏覽

Why Doesn't My SVG Data URL Background Image Display in Firefox?

SVG 資料URL 背景影像在Firefox 中不顯示

使用偽資料URL 將SVG 設定為背景影像時元素,影像無法在Firefox 中顯示。這是因為 Firefox 將 URL 中的「#」字元視為片段標識符的開頭。

要解決此問題,資料 URL 內容必須進行 URL 編碼。這涉及將所有“#”字元轉換為“#”。下面修改後的CSS 程式碼合併了URL 編碼:

content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 12px;
background-image: url('data:image/svg+xml;utf8,%3Csvg version="1.1">

透過對資料URL 內容進行URL 編碼,Firefox 可以正確地將雜湊字元解釋為SVG 資料的一部分,從而允許影像顯示為背景。

以上是為什麼我的 SVG 資料 URL 背景圖片在 Firefox 中不顯示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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