css - slider 背景在 IE8 中无法正确显示

Question

我的 slider 背景显示在 Chrome、Firefox 和大多数 IE 版本中，但不显示在 IE8 中。它的背景与页面的其余部分保持相同的颜色。

.site-slider {
    width: 100%;
    background: url(images/alexandria/header_overlay.png) no-repeat center top,
                url(images/alexandria/header_bg.jpg);
}

如果我将 background 更改为 background-image，每个浏览器都会显示与 IE8 相同的内容。

Answer 1

IE doesn’t support multiple backgrounds until version 9.您可以通过添加一个包装器元素并将一个背景应用到父级和一个子级来解决这个问题。

.site-slider-wrapper {
    background-image: url(images/alexandria/header_bg.jpg);
}

.site-slider {
    background: url(images/alexandria/header_overlay.png) no-repeat center top;
}

将属性名称更改为 background-image 会破坏每个浏览器中的 CSS 的原因是第一个背景设置了 background-repeat 和 background-position 属性(no-repeat center top)，作为 background-image 的一部分无效。 (background 的全部意义在于成为 background-* 属性的简写。)