嗨，我的页面上有几个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部分？
3 回答
四季花海
TA贡献1811条经验 获得超5个赞
我最近有一个类似的问题，并且意识到这不是由于background-size:cover而是background-attachment:fixed。
我通过使用针对iPhone的媒体查询并将background-attachment属性设置为来解决了该问题scroll。
就我而言：
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
@media (max-width: @iphone-screen) {
background-attachment: scroll;
}
}
编辑：该代码块位于LESS中，并为假定了预定义变量@iphone-screen。
杨魅力
TA贡献1811条经验 获得超6个赞
这适用于Android 4.1.2和iOS 6.1.3（iPhone 4）以及台式机开关。为响应性网站而写。
以防万一，在您的HTML头中，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
HTML：
<div class="html-mobile-background"></div>
CSS：
html {
/* Whatever you want */
}
.html-mobile-background {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 125%; /* To compensate for mobile browser address bar space */
background: url(/images/bg.jpg) no-repeat;
background-size: 100% 100%;
}
@media (min-width: 600px) {
html {
background: url(/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
.html-mobile-background {
display: none;
}
}
- 3 回答
- 0 关注
- 511 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消