SVG 背景画像が Firefox 擬似要素で表示されないのはなぜですか?

Firefox 疑似要素で SVG 背景画像が表示されない

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 中国語 Web サイトの他の関連記事を参照してください。