IE 9 CSS渐变与背景中的图像不起作用答案

【问题标题】：IE 9 CSS gradient with image in background not workingIE 9 CSS渐变与背景中的图像不起作用
【发布时间】：2012-01-27 05:21:53
【问题描述】：

我正在使用此代码，它在 Chrome 和 Firefox 中运行良好，但在 IE9 中却不行。并根据此页面 Multiple background 和 background-size 在 IE9 中得到支持

span.select {
    position: absolute;
    bottom: 0;
    float: left;
    left: 0;
    line-height: 1;
    text-indent: 10px;
    background: #ffffff;
    background: url(../img/color-arrow.png) no-repeat, linear-gradient(top, #ffffff 0%,#a9a9a9 100%);
    cursor: default;
    z-index: 1;
    border: #dadada 1px solid;
    border-radius: 4px;
    background-position: 100% center;
    background-size: 1.5em 0.6em, 100% 100%;
    text-shadow: 0px 1px 1px #fff;
    white-space: nowrap }

我在其中使用了多重背景和背景调整大小

【问题讨论】：

标签： internet-explorer css cross-browser internet-explorer-9

【解决方案1】：

IE9 Doesn't support gradients. IE10 supports them unprefixed。然而，IE9 确实实现了 SVG。

我建议使用colorzilla's gradient editor。要将 SVG 用作后备，只需选中他们的“IE9 支持”复选框。

如果您确实需要 IE8 中的渐变（您不应该这样做，因为它们应该只用于渐进增强），您可以使用 IE's proprietary filter property，但要小心，因为它非常有问题。

【讨论】：

我添加了-ms-，但它仍然没有显示，因为多重背景不起作用
-ms- 前缀用于 IE10 支持，据我所知。 IE9 和一些旧版本支持一些专有过滤器 - 您可能需要查看这些过滤器。
@Dmitriy IE10 支持无前缀渐变。不需要-ms- 前缀。答案已编辑。

【解决方案2】：

IE9 支持多个背景图像，但不支持多个背景元素的混合。你的问题是图像和渐变。

此外，-ms- 不会对任何属性的 CSS 兼容性做任何事情。

【讨论】：

“背景元素”这个词是错误的。线性渐变只是生成的背景图像。
@PointedEars - 我不得不不同意。 “元素”指的是任意数量的项目、渐变、图像、颜色......
我建议使用“values”，因为“元素”已经被 CSS 格式化的标记语言所采用。