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

【问题标题】：How to set body background image as cover for ios devices如何将正文背景图像设置为 ios 设备的封面
【发布时间】：2014-04-30 02:51:41
【问题描述】：

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

谢谢

【问题讨论】：

试试-webkit-background-size: cover; -webkit-background-size: 100%;。

标签： css background-image

【解决方案1】：

应该是background-size: cover; 而不是background-image。此外，您应该使用 browser 前缀，因为该属性是根据 CSS3 规范¹..

发布的

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

^1.Browser Support

【讨论】：

@user2894216 我看不出有任何不工作的理由，而且，如果你期望它能够响应而不是你错了
我怎样才能让它响应
@user2894216 要么使用媒体查询和更改维度，你也可以尝试background-size: 100% 100%;，但没有流畅的响应

【解决方案2】：

edit - 更新小提琴

我遇到了类似的问题。我通过为背景设置滚动属性得到了我的解决方案。还要确保将父容器设置为 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; 
  }
}

【讨论】：

【解决方案3】：

用户 mkubilayk 发布了真正为我工作的解决方案 here。救生员具有以下属性：

background-attachment: scroll;

引用：

我最近遇到了类似的问题，并意识到这不是由于背景尺寸：覆盖但背景附件：固定。

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

.cover { 背景尺寸：封面；背景附件：固定； background-position: center center;
@media (max-width: @iphone-screen) {
    background-attachment: scroll;
} }

【讨论】：

【解决方案4】：

我将提供的解决方案可以看到here。但有一个细微的变化。此方法经过多次测试，对于 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%;
}

【讨论】：