ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して SVG 背景画像の塗りつぶしの色を変更するにはどうすればよいですか?
SVG 画像をインラインで埋め込む場合、CSS を使用して塗りつぶしの色を簡単に変更できます。ただし、SVG が背景画像として使用される場合、この手法には問題が生じます。
この質問は、背景画像として使用される SVG の塗りつぶし属性を変更する必要性について説明します。問題の SVG には、特定の塗りつぶし色を持つ星と円が含まれています。
解決策は、CSS マスクを実装することにあります。マスク プロパティは、要素に適用されるマスクを作成します。マスク画像はSVGファイルのURLに設定されます。マスクを目的の要素に適用すると、埋め込まれた SVG の塗りつぶしの色を効果的に変更できます。
次の CSS コードは、マスクの使用方法を示しています。
.icon { background-color: red; -webkit-mask-image: url(icon.svg); mask-image: url(icon.svg); }
この例では、 .icon クラスの背景は赤になり、SVG マスクが適用されて、SVG の塗りつぶしの色が変更されます。
詳細については、このテクニックについては、次の包括的な記事を参照してください:
https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
以上がCSS を使用して SVG 背景画像の塗りつぶしの色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。