Question

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

我只是使用了css代码：

background-size：100％150％;

然后我把它改为：

background-size：auto;

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

修改

使用下面的代码，一切都适用于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');
}

Answer 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个这样的确切问题，答案与我的完全一样，所以没有必要问这个问题

Answer 2

我建议使用CSS3Pie polyfill脚本。

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

它适用于IE6及更高版本，并且只需要CSS文件中的一小部分额外代码来激活它，其他浏览器将完全忽略它。

不同浏览器中的背景大小

2 个答案: