css - 如何将正文背景图像设置为 ios 设备的封面

Question

我有一个带有背景图像的 div，我设置background-size:cover为制作全宽和全高背景图像。但它不适用于ios设备我如何为ios设备设置它请帮助我

谢谢

Answer 1

它应该是background-size: cover;而不是background-image。此外，您应该使用browser前缀，因为该属性是在 CSS3 规范¹下发布的。

body {
   background-image: url(#);
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
}

^1. 浏览器支持

Answer 2

编辑- 更新小提琴

我有一个类似的问题。我通过为背景设置滚动属性得到了我的解决方案。还要确保将父容器设置为 100% 的高度和宽度。AdrianS 有针对 html 设置 100% 高度和 100% 宽度的正确点。

在下面的代码中，我有一个header用于背景图像的类。根据需要进行调整。

在http://jsfiddle.net/Bavc_Am/7L3gD/5/查看小提琴

如果有帮助，请点赞，我是新来的。

html,
body {
  height: 100%;
  width: 100%;
}

/* Full Page Image Header Area */

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  background: url(http://placehold.it/800x800.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


/* Responsive */

@media (max-width: 768px) {

  .header {
    background: url(http://placehold.it/800x800.png) no-repeat center center scroll; 
  }
}

Answer 3

用户 mkubilayk 在这里发布了对我真正有用的解决方案。救生员具有以下财产：

background-attachment: scroll;

报价：

我最近遇到了类似的问题，并意识到这不是由于 background-size:cover 而是 background-attachment:fixed 造成的。

我通过使用 iPhone 的媒体查询并将 background-attachment 属性设置为滚动解决了这个问题。

.cover { 背景尺寸：封面；背景附件：固定；背景位置：中心中心；

@media (max-width: @iphone-screen) {
    background-attachment: scroll;
} }

Answer 4

我将提供的解决方案可以在这里看到。但有一个细微的变化。此方法经过多次测试，对于 IE，它支持 IE8+。您可以在我提供的链接中看到完整的浏览器支持。

html {
  width: 100%;
  height: 100%;
}
body {
  background: #Fallback-color;
  background: url(../images/image.jpg) center top no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg', sizingMethod='scale')";
  height: 100%;
}