Question

我在单页面布局网站上使用了多个部分。每隔一节使用背景图片：

<body>
    <section id="one" class="banner"></section>
    <section id="two"></section>
    <section id="three" class="style1"></section>
    <section id="four"></section>
    <section id="five" class="style2"></section>
    <section id="six"></section>
</body>

如果横幅具有固定的高度，那么background-size: cover适用于所有浏览器，其中桌面具有background-attachment: fixed和＆lt; 1024px有background-attachment: scroll。

问题是， style1 和 style2 的内容具有可变高度，图像被拉伸到该部分的高度，而不是应该是视口的高度。

这是我对style1-3块的CSS：

.style1, .style2, .style3 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
}
.style1 {
    background-image: url('../../images/2.jpg');
}
.style2 {
    background-image: url('../../images/3.jpg');
}
.style3 {
    background-image: url('../../images/4.jpg');
}

我已尝试使用jQuery将<img/>与position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%;以及其他解决方案注入到SO中，但我最终得到的是所有图像都位于顶部覆盖横幅上且仅最后一张图片是可见的

这种情况发生在Chrome移动版，Safari移动版上，而不是在W10M上的Edge浏览器上（它的工作原理与桌面相同）。

background-size：在移动浏览器上展示的封面

0 个答案: