Question

我有一个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>

svg图像显示在浏览器上，但非常有线，如图所示现在，当我调整窗口大小时，它显示如下：
在第一张照片上，我想念了四分之一的照片。当我调整窗口大小时，它只是削减了部分图片。我怎么解决这个问题？

此site显示了如何运作。我只是想要一样。

Answer 1

您面临的问题是因为background-size: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%;
}

使用svg文件作为html背景

1 个答案: