使用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的背景。