堆栈内存溢出
  繁体   English   中英

CSS background-size：移动Safari的封面替换

[英]CSS background-size: cover replacement for Mobile Safari

 原文  2013-08-25 13:45:22  0   10    html/ css/ mobile-safari

问题描述

嗨，我的页面上有几个div，它们有背景图像，我想扩展以覆盖整个div，而div又可以扩展以填充视口的宽度。

显然background-size: cover在iOS设备上出现意外行为。 我已经看到了一些如何修复它的例子，但我不能让它们在我的情况下工作。 理想情况下，我不想在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部分？

10 个解决方案

解决方案1
 140  2014-01-30 12: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的通知。

解决方案2
 13 已采纳  2013-08-25 20:36:59

我在最近构建的很多移动视图中遇到过这个问题。

我的解决方案仍然是一个纯粹的CSS后备

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

解决方案3
 6  2013-10-06 05:01:01

也贴在这里： “背景大小：封面”不包括手机屏幕

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

解决方案4
 4  2016-07-22 17:37:47

网上有答案试图解决这个问题，但是没有一个能够正常运行。 目标：把一个背景图像上body和具有background-size: cover; 工作移动，没有媒体查询， overflows或hacky 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应该得到这些规则，它看起来可能......直到键盘打开时的高度变化。 

html {
    height: 100vh; /* set viewport constraint */
    min-height: 100%; /* enforce height */
}

解决方案5
 0  2013-12-15 05:50:38

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

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

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

Reference- 使用webkit的Safari版本

解决方案6
 0  2014-04-04 15:58:16

我在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 */ }

解决方案7
 0  2015-08-03 15:14:15

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

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

解决方案8
 0  2016-05-12 07:44:06

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

解决方案9
 -1  2016-06-27 08:42:15

我找到了一个有效的解决方案，以下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

解决方案10
 -2  2014-11-11 12:25:16

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 覆盖手机的背景尺寸 Safari中的CSS背景大小 CSS打印的“背景大小：封面；”修复程序 CSS Sprite + background-size：封面 CSS：背景大小：50% 覆盖 - 可能吗？ CSS background-size：封面;工作很糟糕 CSS - 背景尺寸：封面太大 CSS - 背景尺寸：封面； 无法在 Firefox 中工作 “background-size：cover”不包括手机屏幕 CSS背景大小封面和背景位置
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM