嗨,我的页面上有几个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部分？
http://jsfiddle.net/julien_c/GmAL4/
我发现如果你应用CSS背景body,它会占用整个页面(无论实际的高度或宽度body是多少).
但是,如果应用CSS背景都html和body为背景body 不占用整个页面.
这种差异是否存在预期的行为？
如何叠加两个全屏背景(例如,背景颜色和半透明图像？)
有时我看到人们应用全局css样式html,有时我看到他们应用它们body,原始css和javascript.
这两者有什么不同吗？制作全球css风格的标准是什么？在他们之间挑选时我有什么需要知道的吗？