不同浏览器中的背景大小答案

【问题标题】：background-size in different browsers不同浏览器中的背景大小
【发布时间】：2013-08-10 17:27:16
【问题描述】：

我在不同浏览器上显示缩放背景时遇到了一些困难。我在 Google chrome 浏览器上创建了该网站，但在 iPhone 或更早版本的 IE 上加载该网站时，背景无法缩放，或者根本不显示。

我只是使用了css代码：

背景尺寸：100% 150%；

然后我改成：

背景尺寸：自动；

但这仍然会带来一些麻烦。知道如何在从版本 6 到现在的每个浏览器和 IE 上调整/缩放此图像的大小吗？

编辑

使用下面的代码，一切都可以在 Chrome、FF 和最新的 IE 上运行，但在 IE8（以及我认为以下）上，它显示了未拉伸的图片。在 iPhone 上，它根本不显示任何内容。：/

#head-div
{
    padding-bottom: 15%;
    width: 100%;
     background: url(../img/banner.gif) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/banner.gif', sizingMethod='scale');
}

【问题讨论】：

Stretch and scale a CSS image in the background - with CSS only 的可能重复项
它应该可以在 iPhone 上运行。 Safari 支持background-size。但是，在 IE8 中不是。 (Details)

标签： cross-browser scale css

【解决方案1】：

body {
  background: url(image.jpg) no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',     sizingMethod='scale');
  -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg', sizingMethod='scale');
}

这些是跨浏览器的要求。堆栈溢出中已经有 5 个这样的确切问题，答案和我的完全一样，所以没有必要问这个问题

【讨论】：

你错过了前缀的前导破折号。
不用担心 :-) 很容易犯错误。 +1 是一个很好的答案。虽然我认为 CSS3Pie 比使用 filter 更好，但由于 IE 过滤器样式的所有错误和限制。
哦，微软的乐趣 :-)
呵呵。好吧，当然，旧 IE 版本的乐趣。较新的版本是非常好的浏览器，但是当人们仍然希望支持 IE6 时，您总是会遇到一些问题。
您好，感谢您的回答，遇到了一些问题，在上面进行了编辑。谢谢

【解决方案2】：

我建议使用CSS3Pie polyfill 脚本。

此脚本无缝地为旧 IE 版本添加了对各种 CSS 功能的支持，包括background-size。

它在 IE6 及更高版本中工作，并且只需要在您的 CSS 文件中添加一点点额外代码即可激活它，其他浏览器将完全忽略。

【讨论】：