Question

我是网络开发的新手。我想要做的是建立一个自适应网站。我决定使用.svg来拍摄我的很多照片。我的问题是 - 有没有办法使用.svg作为背景图像使用CSS样式表并保持自适应和扩展。我希望能够使用媒体查询来保持网站的移动部分更小，图像更少。问题是，我希望我的.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部分的目标是最多800px宽的屏幕：

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

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

如何将svg设置为背景图像

1 个答案: