CSS background-size：覆盖替换Mobile Safari [英] CSS background-size: cover replacement for Mobile Safari
问题描述
您好，我的页面上有几个div，我有一些背景图片，我想展开以覆盖整个div，然后依次展开以填充视口的宽度。
Hi I have several divs on my page which have background images that I want to expand to cover the entire div which in turn can expand to fill the width of the viewport.
显然， background-size：cover 在iOS设备上出现意外情况。我看到了一些如何解决它的例子，但我不能让他们在我的情况下工作。理想情况下，我不想在HTML中添加额外的< img> 标签，但如果这是唯一的方式，我会的。
Obviously background-size: cover behaves unexpectedly on iOS devices. I've seen some examples of how to fix it, but I can't make them work in my situation. Ideally I'd prefer not to add extra <img> tags to the HTML but if it's the only way then I will.
这是我的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中内容的可变高度。
The question is, how can I get the background image to completely cover the section div, taking into account the variable width of the browser and the variable height of the content in the div?
推荐答案
在我最近构建的很多移动视图上有这个问题。
I've had this issue on a lot of mobile views I've recently built.
我的解决方案仍然是纯CSS后台
My solution is still a pure CSS Fallback
http://css-tricks.com/perfect-full-page-background-image/ 作为三个伟大的方法，后两个是后退当CSS3的封面不工作时。
http://css-tricks.com/perfect-full-page-background-image/ as three great methods, the latter two are fall backs for when CSS3's cover doesn't work.
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
这篇关于CSS background-size：覆盖替换Mobile Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
