CSS background-size：用于移动Safari的封面replace
您好我有我的网页上有几个div有我想要扩大覆盖整个股利，这反过来可以扩大，以填补视口的宽度的背景图像。
很明显， background-size: cover在iOS设备上的行为意外。 我已经看到了一些如何解决这个问题的例子，但是我不能让他们在我的情况下工作。 理想情况下，我宁愿不添加额外的<img>标签的HTML，但如果这是唯一的方法，那么我会的。
这是我的HTML：
<body> <div id="section1" class="section"> ... </div> <div id="section2" class="section"> ... </div> <div id="section3" class="section"> ... </div> </body>
而CSS：
.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; }
问题是，我怎样才能得到的背景图像完全覆盖部分div，考虑到可变宽度的浏览器和div的内容的variables高度？
我在最近build立了很多移动视图时遇到过这个问题。
我的解决scheme仍然是一个纯粹的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%; }
最近我有类似的问题，并意识到这不是由于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预定义的variables。 感谢@stephband的通知。
另外贴在这里： “背景大小：封面”不包括手机屏幕
这适用于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(http://img.dovov.combg.jpg) no-repeat; background-size: 100% 100%; } @media (min-width: 600px) { html { background: url(http://img.dovov.combg.jpg) no-repeat center center fixed; background-size: cover; } .html-mobile-background { display: none; } }
有networking上的答案试图解决这个问题，但是没有一个对我来说是正确的。 目标：将背景图像放在body上，并有background-size: cover; 工作移动，没有媒体查询， overflows或hacky z-index: -1; position: absolute; 覆盖。
这是我做的解决这个问题。 即使键盘抽屉处于活动状态，它也可以在Android上的Chrome上运行。 如果有人想testingiPhone会很酷：
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 */ }
对于Safari版本< 5.1 ，css3属性background-size不起作用。 在这种情况下，你需要webkit 。
所以你需要使用-webkit-background-size属性来指定背景大小 。
因此使用-webkit-background-size:cover 。
参考 – 使用webkit的Safari版本
我在Stephen Gilbert的网站上find了以下内容 – 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 */ }
它的背景尺寸正确的代码是：
<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>
@media (max-width: @iphone-screen) { background-attachment:inherit; background-size:cover; -webkit-background-size:cover; }
我find了一个可行的解决scheme，下面的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
html body { background: url(/assetshttp://img.dovov.comheader-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; }
