使用SVG作為背景影像
P粉986937457
2023-08-14 18:41:14
<p>如何将SVG作为CSS中的<code>background-image</code>使用？</p>
<p>我尝试使用它，但是我感到困惑。</p>
<p>我知道它应该是以CSS格式存在的，但我该如何做到这一点</p>
<pre class="brush:html;toolbar:false;"><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>
</pre>
<p><br /></p>
當然可以！在HTML中使用SVG作為背景影像，並透過CSS進行設定非常簡單。我將為您提供步驟。
直接在CSS中包含SVG：
如果您有SVG程式碼，可以使用資料URL將其直接嵌入到CSS中。例如：
.my-element { background-image: url("data:image/svg+xml,<svg ... > ... </svg>"); }您需要確保SVG內容（即
<svg> ... </svg>之間的所有內容）不包含可能與CSS語法衝突的任何字元。這包括像#，"或;這樣的字元。您可以對這些字元進行URL編碼以避免問題。將SVG檔案當作背景：
如果您的SVG內容在單獨的檔案中，例如
background.svg，您可以像引用其他圖像一樣引用它：.my-element { background-image: url('path/to/your/background.svg'); }在HTML和CSS中實作：
這是一個簡單的範例。假設您將SVG保存在名為
background.svg的檔案中：HTML（index.html）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Background</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="my-element"> <!-- Your content here --> </div> </body> </html>CSS（
styles.css）：.my-element { width: 300px; /* or whatever size you want */ height: 300px; background-image: url('background.svg'); background-repeat: no-repeat; /* this prevents the image from repeating */ background-size: cover; /* this scales the image to cover the div */ }注意事項：
始終記住，為了顯示SVG，元素（在本例中為
my-element）應具有指定的width和height或足夠的內容以給予尺寸。 使用background-size，background-position等來調整所需的SVG背景的定位和大小。 現在，當您開啟index.html時，您應該會看到SVG作為my-elementdiv的背景。