Question

我正在尝试将PSD转换为HTML，但我遇到了问题。我的网站适用于除IE8和IE7之外的所有主流浏览器。在IE8和IE7上没有显示背景。

背景是PNG图像，并重复播放。我知道非重复图像的方式，但对于重复图像我需要做什么？这是我使用过的CSS：

#footer-top {
    padding: 20px 0;
    background: url('img/footer-bg.png')repeat;
    width:100%;
    overflow:hidden;
    margin-top: 38px;
}

Answer 1

请参阅博客文章PNG background-repeat bug in Internet Explorer 7 and 8

它说：

显然Internet Explorer 7和8仍然没有得到PNG。在我目前的一个项目上工作时，我偶然发现了一个重复PNG背景图像的错误。

对于这个项目，我有一个包含几个容器元素的页面模板，所有容器元素都有1像素×1像素的PNG背景设置重复，在IE 7和IE 8中测试它时看起来很棒。所以，我创建了我的具有相同样式的下一页模板。这次，IE 7和8在处理背景重复时都被阻塞。这些浏览器都没有重复，而是莫名其妙地试图在整个容器中拉伸1×1图像。 PNG碰巧有60％的alpha透明度，但我不确定这是否重要。一位同事建议将其改为10×10像素图像，只是为了看看会发生什么。惊喜，惊喜。修好了。

我做了一些搜索，看看是否有其他人遇到过这个并找到了这篇最近的博文。作者还发现这个错误似乎是随机发生的，一个4×4像素的图像解决了他的问题。由于10×10和1×1之间的文件大小差别不大，我会坚持使用10×10。但我同意他的看法，这个错误产生了很好的效果，如果可以随意复制它会很棒。

Answer 2

也许您需要repeat之前的空格？

background: url('img/footer-bg.png') repeat;

（我没有IE7或8方便检查。）

Answer 3

亲爱的，我找到了最简单的方法。试试吧

background-image:url(images/back-bg.jpg) !important;
background-repeat:repeat !important;
background-color:#fff !important;
background-position:left !important;

为什么我的重复PNG背景图像不显示在IE7或IE8中？

3 个答案: