我的 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 相同的内容。
最佳答案
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-*
属性的简写。)
关于css - slider 背景在 IE8 中无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26937476/