-1

我正在创建一个网站，使用 chrome 进行调试。我正在创建一个滚动页面，其中包含全高图像作为我的部门的背景图像，使用“背景尺寸：封面；” 和“背景附件：固定；”。

在我的电脑上的 chrome（移动）调试查看器上，即使有更多的滚动文本可以覆盖图像，图像保持相同大小，并且内容只是滚动到未放大或扭曲的图像上。

上传到 s3 并在我的移动设备上查看后，具有大量内容的 div 的背景图像会放大照片（假设它这样做是为了继续覆盖），看起来不太好。

到目前为止，我已经尝试将内容包装器的背景附件更改为固定，然后滚动以查看它是否有效；它没。唯一允许背景图像不放大的是将背景大小从封面更改为 100% 80%;。这保留了原始缩放，但显然没有覆盖所有文本，导致一个全尺寸图像 div 和下一个之间存在间隙。

`    .second-page{
    background-image: linear-gradient(rgba(77, 77, 77, 0.5), rgba(77, 77, 77, 0.5)), url(images/background6_port.jpg);
    background-repeat: no-repeat;
    min-height: 100vh;
    min-width: 100vw;
    background-size: cover;
    position: relative;
    background-attachment: fixed;


}
.content{
    margin-right: 15%;
    margin-left: 15%;
}`

预期结果：背景图像覆盖移动设备上 100% 的视口，允许文本和其他内容在其上滚动而不放大

实际结果：背景图像放大以覆盖所有内容区域，导致像素化和糟糕的视觉体验。

4

1 回答 1

1

大多数时候我在这个网站上发帖，只要我发布我的问题，我就会想出答案。对于处于类似情况的任何人，我通过添加来解决此问题

max-height: 100vh;
overflow-y: scroll;

希望这对其他人有帮助！

于 2019-07-02T06:09:16.783 回答