SVGを背景画像として使用する

Question

如何将SVG作为CSS中的background-image使用？

我尝试使用它，但是我感到困惑。

我知道它应该是以CSS格式存在的，但我该如何做到这一点

<svg width="1318" height="800" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="-45.25%" y1="-88.077%" x2="97.789%" y2="100%" id="a"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#F952C5" offset="4.09%"/><stop stop-color="#9952FF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="-64.06%" y1="-121.906%" x2="97.789%" y2="100%" id="b"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#F952C5" offset="4.09%"/><stop stop-color="#9952FF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="100%" y1="111.373%" x2="-24.893%" y2="-55.159%" id="c"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#9952FF" offset="100%"/></linearGradient><linearGradient x1="21.681%" y1="5.006%" x2="145.861%" y2="145.591%" id="d"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#9952FF" offset="100%"/></linearGradient><linearGradient x1="6.375%" y1="-15.195%" x2="91.754%" y2="105.701%" id="e"><stop stop-color="#FF52C1" offset="0%"/><stop stop-color="#9952FF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" transform="matrix(-1 0 0 1 834.817 0)" d="M0 0h409.224l425.593 376v156.83z"/><path fill="url(#b)" transform="rotate(180 528.65 584)" d="M0 367l641.153.138L1057.3 673.299V801z"/><circle stroke="url(#c)" stroke-width="17" cx="704" cy="563" r="49"/><rect fill="url(#d)" opacity=".558" transform="rotate(45 1107.87 708.87)" x="1088.87" y="689.87" width="38" height="38" rx="3"/><rect fill="url(#d)" opacity=".503" transform="rotate(45 1279.598 103.598)" x="1251.598" y="75.598" width="56" height="56" rx="3"/><rect fill="url(#d)" opacity=".558" transform="rotate(45 934.627 63.627)" x="918.627" y="47.627" width="32" height="32" rx="3"/><rect fill="url(#d)" opacity=".558" transform="rotate(45 703.627 186.627)" x="687.627" y="170.627" width="32" height="32" rx="3"/><rect fill="url(#d)" opacity=".387" transform="rotate(45 1237.02 606.02)" x="1228.521" y="597.521" width="17" height="17" rx="1"/><path d="M91.477 739.477v-16.5a5 5 0 0 1 10 0v16.5h16.5a5 5 0 0 1 0 10h-16.5v16.5a5 5 0 1 1-10 0v-16.5h-16.5a5 5 0 1 1 0-10h16.5z" fill="url(#e)" opacity=".211" transform="rotate(45 96.477 744.477)"/></g></svg>

Answer 1

＃＃＃もちろん！ SVG を HTML の背景画像として使用し、CSS 経由で設定するのは非常に簡単です。手順をご案内します。

CSS に直接 SVG を含める:

SVG コードがある場合は、データ URL を使用して CSS に直接埋め込むことができます。例えば：＃＃＃ リーリー

SVG コンテンツ (つまり、

<svg> ... </svg>

の間のすべて) に、CSS 構文と競合する可能性のある文字が含まれていないことを確認する必要があります。これには、#、"、; などの文字が含まれます。問題を回避するために、これらの文字を URL エンコードできます。 SVG ファイルを背景として使用します:

SVG コンテンツが background.svg

などの別のファイルにある場合は、他の画像と同様に参照できます。

リーリー HTML および CSS での実装:

これは簡単な例です。 SVG を background.svg

というファイルに保存するとします:

HTML(index.html): リーリー

CSS (

styles.css

): リーリー ＃＃＃予防：＃＃＃ SVG を表示するには、要素 (この場合は my-element

) に指定された

width

および

height または十分な値が必要であることを常に覚えておいてください。コンテンツに寸法を与えます。 background-size、background-position などを使用して、SVG 背景の希望の位置とサイズを調整します。 index.html を開くと、my-element div の背景として SVG が表示されるはずです。