CSS背景-大小: Mobile Safari的封面替换
您好，我的页面上有几个div，其中包含我想要展开的背景图像，以覆盖整个div，而这些div又可以展开以填充视窗的宽度。
显然，在iOS设备上background-size: cover的行为是出乎意料的。我见过一些如何修复它的例子，但我不能让它们在我的情况下工作。理想情况下，我不希望添加额外的<img>标记，但如果这是唯一的方法，我会这样做。
下面是我的代码：
.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部分？
回答 8
Stack Overflow用户
发布于 2014-01-30 20:39:19
我最近遇到了类似的问题，我意识到这不是因为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的预定义变量。谢谢你的通知，@stephband。
Stack Overflow用户
发布于 2013-10-06 13:01:02
也在这里发帖："background-size: cover" does not cover mobile screen
这适用于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;
}
}Stack Overflow用户
发布于 2016-07-23 01:37:47
网上有一些答案试图解决这个问题，但对我来说没有一个是正确的。目标:在body上放置一个背景图像，让background-size: cover;在移动设备上工作，而不需要媒体查询、overflows或繁琐的z-index: -1; position: absolute;覆盖。
这是我为解决这个问题所做的。即使当键盘抽屉处于活动状态时，它也可以在Android上的Chrome上运行。如果有人想要测试iPhone，那将是很酷的：
body {
background: #FFFFFF url('../image/something.jpg') no-repeat fixed top center;
background-size: cover;
-webkit-background-size: cover; /* safari may need this */
}这就是神奇之处。将html视为具有相对于实际视口的比率强制高度的包装器。你知道经典的响应式标签<meta name="viewport" content="width=device-width, initial-scale=1">吗？这就是使用vh的原因。而且，从表面上看，body应该得到这些规则，并且它可能看起来ok...until高度的变化，就像键盘打开一样。
html {
height: 100vh; /* set viewport constraint */
min-height: 100%; /* enforce height */
}https://stackoverflow.com/questions/18429620
复制相似问题