使用SVG作為背景影像

Question

如何將SVG作為CSS中的background-image使用？我嘗試使用它，但是我感到困惑。我知道它應該是以CSS格式存在的，但我該如何做到這一點

P粉258083432 · Answer

當然可以！在HTML中使用SVG作為背景影像，並透過CSS進行設定非常簡單。我將為您提供步驟。

直接在CSS中包含SVG：

如果您有SVG程式碼，可以使用資料URL將其直接嵌入到CSS中。例如：

.my-element {
    background-image: url("data:image/svg+xml,");
}

您需要確保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）：




    
    
    SVG Background

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-element div的背景。