Question

我想要一个我正在处理的项目的全宽背景（带水平滚动）。

我已添加以下代码来设置背景：

.street {
    position: absolute;
    top: 0;
    left: 50%;
    background: url('../img/street.svg') no-repeat left;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -2;
}

这有效，但后来我遇到了一个新问题，因为背景大小：覆盖图像只显示其中的一部分。

用户必须水平滚动，以便他或她可以看到整个街道图像。我的问题是：我如何解决这个问题？（我已经在互联网上搜索过，也许这是一个非常简单的解决方案，很遗憾地问：））

What I have so far 谢谢！

Answer 1

使用，background-size: 100% 100%;这将为您的整个DIV填充完整的图像。

.street {
    position: absolute;
    top: 0;
    left: 50%;
    background: url('../img/street.svg') no-repeat left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    z-index: -2;
}

区别在于：

百分比：以父元素的百分比设置背景图片的宽度和高度。第一个值设置宽度，即第二个值设置高度。如果只给出一个值，则第二个值设置为“自动”。
封面：调整背景图片的大小以覆盖整个容器，即使它必须拉伸图像或剪切一点点其中一条边缘。
包含：调整背景图片大小以确保图像完全可见

Here is a good explanation for the same

水平滚动与完整的背景图像

1 个答案: