如何将svg设置为背景图像[重复]

Question

我是网络开发的新手。我试图做的是建立一个自适应网站。我决定为我的许多图像使用 .svg。我的问题是 - 有没有办法使用 css 样式表将 .svg 用作背景图像并保持其自适应和缩放。我希望能够使用媒体查询来使网站的移动部分更小，图像更少。 olny 的问题是，我希望我的 .svg 能够扩展（随着网页变得越来越大）。我找到了一种将其作为内联图像执行的方法，但这总是需要我从加载开始就加载所有图像。我不希望移动用户必须下载所有图像，因为它会减慢速度并从那里的数据帐户中花钱。我希望媒体查询根据用户的屏幕大小通过 css 将图像拉入和拉出页面。很抱歉这个冗长的问题。感谢您的宝贵时间。

如果可能的话，PS 会尝试不使用 java 脚本来做到这一点吗？在网站上使用 java 脚本有缺点吗？

Answer 1

CSS 规则

background-image: url('file.svg');

要使您的 SVG 缩放，您应该尽可能使用百分比进行测量。例如，如果你想制作一个填充整个背景的渐变：

file.svg

<?xml version="1.0" encoding="utf-8"?>
<svg width="100%" height="100%">
    <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(192,192,192);stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
</svg>

如果这不能提供足够的控制，您可能还想查看responsive CSS with media queries。您可以使用它来将其更改为不同的 SVG。此 CSS 部分的目标屏幕宽度最多为 800 像素：

@media screen and (max-width: 800px) {
    body {
        background-image: url('file800.svg');
    }
}

您可以使用的另一个工具是background-size 规则。这是一条 CSS 3 规则，因此您可能需要查看对不同浏览器的支持级别。