CSS背景大小：移动Safari的封面替代
嗨，我的页面上有几个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部分？
问题答案：
我最近在很多移动设备视图中遇到了这个问题。
我的解决方案仍然是纯CSS后备
是三种很棒的方法，当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%;
}
-
问题内容： 嗨，我的页面上有几个div，它们的背景图像需要扩展以覆盖整个div，而整个div可以依次扩展以填充视口的宽度。 显然在iOS设备上的行为异常。我已经看到了一些修复方法的示例，但是我无法使其在我的情况下起作用。理想情况下，我宁愿不要在HTML中添加额外的标签，但如果这是唯一的方法，那我会的。 这是我的代码： 问题是，考虑到浏览器的可变宽度和div中内容的可变高度，我如何才能使背景图像完全
-
问题内容： 我正在像这样在画布上绘制图像： 事实是图片越来越张紧，我不想要这个。如何模拟CSS属性 在cavas中绘制图像时。 查看（我目前拥有的）和（我的目标）之间的区别。 问题答案： 获得封面功能有点复杂，尽管这里有一个解决方案： 更新了 以解决特殊情况。另请参阅下面的@Yousef评论。 现在您可以这样称呼它： 它将按比例缩放图像以适合该容器的内部。 使用最后两个参数偏移图像： 希望这可以帮
-
问题内容： 是否可以使用JavaScript获取CSS引用的背景图片的实际大小（以像素为单位的宽度和高度）？ 问题答案： 是的，我会这样做… 一些注意事项… 我们需要删除JavaScript返回的部分以获取正确的图像源。如果元素具有多个背景图像，我们需要分割。 我们创建一个新对象并将其设置为新图像。 然后，我们可以读取宽度和高度。 jQuery可能不会让您头痛不已。
-
主要内容：1. background-color,2. background-image,3. background-repeat,4. background-position,5. background-attachment,6. background-size,7. background-origin,8. background-clip,9. background在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观，吸引访问者的眼球。CSS 中提供了一系列用于设置 HT
-
问题内容： 我希望能够单击鼠标并将其保持在div内并移动其背景。在Google上搜索了很多内容，却没有找到我想要的。 问题答案： 好吧，让它起作用。我想我可以解决所有问题了： 最终的jQuery有界限 原始答案 HTML CSS jQuery
-
问题内容： 如果选择了该面板（单击该面板），则该面板的颜色为蓝色。另外，我在该面板上添加了一个小标志（图像），它表示所选面板之前已被选中。 因此，如果用户看到例如10个面板，其中有4个带有这个小标记，则他知道自己之前已经单击了这些面板。到目前为止，这项工作还不错。现在的问题是我无法显示小标志并使面板同时变为蓝色。 我使用css将面板设置为蓝色，使用设置背景图像。但是背景色似乎在图像上方，因此您看不