57

嗨，我的页面上有几个 div，这些 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 中内容的可变高度？

4

10 回答 10

144

我最近遇到了类似的问题，并意识到这不是由于background-size:coverbut 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的通知。

于 2014-01-30T12:39:19.267 回答
16

我最近构建的许多移动视图都遇到了这个问题。

我的解决方案仍然是纯 CSS Fallback

http://css-tricks.com/perfect-full-page-background-image/作为三个很好的方法，后两个是当 CSS3 的封面不起作用时的后备。

HTML

<img src="images/bg.jpg" id="bg" alt="">

CSS

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}
于 2013-08-25T20:36:59.303 回答
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;
    }
}
于 2013-10-06T05:01:01.637 回答
5

网上有一些答案试图解决这个问题，但是它们都没有为我正常工作。目标：将背景图像放在移动设备上body，background-size: cover;无需媒体查询overflows、或 hackyz-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应该得到这些规则，并且看起来还不错……直到键盘打开时的高度变化。

html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
}
于 2016-07-22T17:37:47.473 回答
1

这是正确的背景大小代码：

<div class="html-mobile-background">
</div>

<style type="text/css">
html {
    /* Whatever you want */
}
.html-mobile-background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* To compensate for mobile browser address bar space */
    background: url(YOUR BACKGROUND URL HERE) no-repeat; 
 center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 background-size: 100% 100%
}
</style>
于 2015-08-03T15:14:15.077 回答
0

对于 < 5.1的Safari 版本，css3 属性background-size不起作用。在这种情况下，您需要webkit.

所以你需要使用-webkit-background-size属性来指定background-size。

因此使用-webkit-background-size:cover.

参考- 使用 webkit 的 Safari 版本

于 2013-12-15T05:50:38.867 回答
0

我在斯蒂芬吉尔伯特的网站上找到了以下内容 - http://stephen.io/mediaqueries/。它包括其他设备及其方向。为我工作！

注意：如果您从他的网站复制代码，您需要编辑它以获得额外的空间，具体取决于您使用的编辑器。

/*iPad in portrait & landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}

/*iPad in landscape*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}

/*iPad in portrait*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }
于 2014-04-04T15:58:16.893 回答
0 
@media (max-width: @iphone-screen) {
  background-attachment:inherit;    
  background-size:cover;
  -webkit-background-size:cover;
}
于 2016-05-12T07:44:06.677 回答
-1

我找到了一个可行的解决方案，以下 CSS 代码示例针对 iPad：

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    html {  
        height: 100%;
        overflow: hidden;
        background: url('http://url.com/image.jpg') no-repeat top center fixed;
        background-size: cover; 
    }

    body {  
        height:100%;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

}

参考链接：https ://www.jotform.com/answers/565598-Page-background-image-scales-massively-when-form-viewed-on-iPad

于 2016-06-27T08:42:15.103 回答
-2 
html body {
  background: url(/assets/images/header-bg.jpg) no-repeat top center fixed;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;

  -webkit-background-size: auto auto;
  -moz-background-size: auto auto;
  -o-background-size: auto auto;
  background-size: auto auto;
}
于 2014-11-11T12:25:16.130 回答