使用svg文件作为html背景_Html_Css_Svg

使用svg文件作为html背景

html css svg

使用svg文件作为html背景,html,css,svg,Html,Css,Svg,我有一个svg文件，我想用作整页背景。我尝试了以下方法： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Full Page Background Image | Progressive</title> <style> * { margin: 0; padding: 0; } h

我有一个svg文件，我想用作整页背景。我尝试了以下方法：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title>Full Page Background Image | Progressive</title>

    <style>
        * { margin: 0; padding: 0; }

        html { 
            background: url(city.svg) no-repeat center center fixed; 
            background-size: cover;
        }

    </style>
</head>

<body>

</body>

</html>


整页背景图像|渐进式
*{边距：0；填充：0；}
html{
背景：url（city.svg）无重复中心固定；
背景尺寸：封面；
}

svg图像显示在浏览器上，但正如您在pic上看到的那样，非常有线现在，当我调整窗口大小时，它显示如下：
在第一张照片上，我错过了四分之一的照片。当我调整窗口的大小时，它只是剪切了图片的一部分。我怎样才能解决这个问题

这说明了它是如何工作的。我也希望如此。

您面临的问题是，由于

背景大小：cover它也会拉伸以保持其比例。此外，背景居中，这意味着其中心将正好位于其容器的中心。因此，当图像是正方形时，如果它必须适合矩形，某些部分将被隐藏
通过使图片居中，并且宽度/高度比与其容器不同，剩余的高度将通过顶部和底部流动，在示例中隐藏地面和一些云
在本例中，以不同的方式定位背景可能会更好。我建议你把它放在底部，这样超过高度就会在顶部溢出，让你看到地面，但不是所有的云
您可能更喜欢显示整个图片，通过拉伸它而不保持纵横比
我的建议是：
html { 
    background: url(city.svg) no-repeat center bottom fixed; 
    background-size: cover;
    //To see the whole picture but keep aspect ratio (will leave blank parts)
    //background-size: contain;
    //To see the whole picture but loose aspect ratio
    //background-size: 100% 100%;
}

可能背景大小：100%；或高度：100vh；&宽度：100vw；我们需要看到您的代码的演示，以及要测试的实际图像。无法按预期工作。我也有被切碎的部分。@Paulie\u D我不能添加svg文件。@zero\u编码，在您的代码中，您将svg文件设置为html标记的背景，我不确定这是否是问题所在，您是否尝试将其添加到body标记或body标记内的其他html标记（如div）中。它可以帮助你识别问题，就像一个符咒。非常感谢。