嗨,我的页面上有几个div,它们的背景图像需要扩展以覆盖整个div,而整个div又可以扩展为填充视口的宽度。
显然background-size: cover在iOS设备上的行为异常。我已经看到了一些修复方法的示例,但我无法使其在我的情况下起作用。理想情况下,我宁愿不要<img>在HTML中添加额外的标签,但是如果这是唯一的方法,那我会的。
这是我的代码:
.section {
margin: 0 auto;
position: relative;
padding: 0 0 320px 0;
width: 100%;
}
#section1 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section2 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section3 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
<body>
<div id="section1" class="section">
...
</div>
<div id="section2" class="section">
...
</div>
<div id="section3" class="section">
...
</div>
</body>
问题是,考虑到浏览器的可变宽度和div中内容的可变高度,我如何才能使背景图像完全覆盖div部分?
四季花海
杨魅力