移动版Safari中替代CSS背景大小为cover的方法

Question

移动版Safari中替代CSS背景大小为cover的方法

58

你好，我的页面上有几个div，它们都有背景图片，我想让它们扩展到整个div的大小，而div又可以扩展到填满视口的宽度。

显然，在iOS设备上，background-size: cover 的行为不符合预期。我看到了一些解决方法的例子，但是在我的情况下无法使它们起作用。理想情况下，我希望不必在HTML中添加额外的<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中内容的可变高度？

- Josh

10个回答

16

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

我的解决方案仍然是纯CSS备选方案。

http://css-tricks.com/perfect-full-page-background-image/提供了三种很好的方法，后两种是当CSS3的cover不起作用时的备选方案。

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%;
}

- Zone6

谢谢。我想我需要使用链接中提供的JavaScript解决方案，因为我想使用尽可能大的图像，而这种解决方案只会缩放图像。 - Josh

6

这种解决方案的问题在于它只适用于单个图像。问题提出者的情况涉及到不同的部分，所以需要让这些部分能够滚动。 - Jimmy Chu

如果您想将图像居中，只需添加 right:0;bottom:0;margin:auto;。 - yckart

当我使用这个时，它会导致图像“拉伸以适应”，这是不期望的。 - Choylton B. Higginbottom

6

这里也发布了："background-size: cover"在移动屏幕上不能完全覆盖

这适用于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;
    }
}

- Modular

5

在网络上有一些解决方案尝试解决这个问题，但是对我来说都没有正确地工作。目标：在上放置背景图像，并使在移动设备上正常工作，无需媒体查询、溢出或hacky 和叠加层。以下是我解决这个问题的方法。它在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 */
}

- dhaupin

一旦我删除了background-attachment: fixed;，这个方法对我起作用了，这似乎是iOS背景问题的根本原因。 - gazzwi86

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>

- supetcriss

0

@media (max-width: @iphone-screen) {
  background-attachment:inherit;    
  background-size:cover;
  -webkit-background-size:cover;
}

- Amit Nanda

你能再详细解释一下吗？ - Dieter Meemken

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Amit Nanda

0

我在Stephen Gilbert的网站上找到了以下内容 - 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 */ }

- Mason

0

对于 Safari 版本 <5.1，css3 属性background-size无法正常工作。在这种情况下，您需要使用 webkit。

因此，您需要使用 -webkit-background-size 属性来指定 background-size 。

因此，请使用 -webkit-background-size:cover。

参考-使用 Webkit 的 Safari 版本

- Rajesh Paul

1

希望这个能够起作用，但是对我来说没有任何改变。 - Wrench

-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

- Paul Vincent Beigang

-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;
}

- Pascal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mkubilayk · Accepted Answer

最近我遇到了类似的问题，发现这并不是由于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的提醒。