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

标签 css internet-explorer-8

我的 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 相同的内容。

The difference

最佳答案

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-repeatbackground-position 属性(no-repeat center top),作为 background-image 的一部分无效。 (background 的全部意义在于成为 background-* 属性的简写。)

关于css - slider 背景在 IE8 中无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26937476/

相关文章:

html - 表单上留下的边距会在右侧创建一个额外的空白区域

html - 悬停父元素时如何更改子元素的不透明度

html - BootStrap 输入后移动提交按钮

javascript - IE8 XmlHttpRequest调试

javascript - 在 iframe 中获取带有 class 的元素

javascript - Array.prototype.forEach 在 IE8 中不起作用

javascript - 退出模态后如何重新激活滚动?

html - h3 标签内的文本在 IE8 中不可见?

jquery - 二维 jquery sortable 检索 IE 中的一个错误

javascript - jQuery:使用 :hover 的简单动画