Css IE11中的多重背景

我有以下

css

：

background: url(../images/clouds_bg.png) center, repeat-y -webkit-linear-gradient(#73B9FF, #FFF);
background: url(../images/clouds_bg.png) center, repeat-y linear-gradient(#73B9FF, #FFF);

---

虽然我没有尝试过IE 10及以下版本，但我无法将其用于

Internet Explorer 11

。

IE 10/11似乎要求您在声明其他背景属性（背景颜色除外）之前声明

背景图像。其他浏览器都正确应用了该规则

background: url(../images/clouds_bg.png) center, linear-gradient(#73B9FF, #FFF) repeat-y;

速记属性中提供的值的顺序通常非常重要。你知道
字体
需要一定的顺序，就像
填充
、
边距
、
边框半径
等一样。
背景
也一样

Internet Explorer遵循和记录的属性顺序。这两个文档源都列出了速记属性顺序：

[ <color> || <image> || <repeat> || <attachment> || <position> ]

[| | | | |提供相同的顺序

这里学到的教训不是Internet Explorer不可靠，而是我们应该始终遵循标准机构和浏览器供应商提供的示例

演示：

注意：MSDN确实说您可以“以任何顺序”提供值，但我鼓励您遵循规范，除非另有说明。在这种情况下，只要
image
是
url（），Internet Explorer将使用
repeat
previous
image
）
值。使用
线性渐变
需要上述顺序。
尝试不同的互联网浏览器，如
谷歌Chrome
，
火狐
，或
Safari
我总是遇到相同的问题（除非我不使用多个背景…）。让我们给你一个答案。@Domenico在Internet Explorer已经遵循规则的情况下不需要切换浏览器。@Domenico它不起作用，因为它写得不正确。谢谢你的输入@JonathanSampson！非常有用！那么我是否需要在颜色或图像部分添加线性渐变，就好像我也包含了图像一样？@matt1985检查以下内容：。正如Natu所说，渐变被认为是背景属性中的图像，因此它们应该在重复部分之前。这很有魅力！我完全忘记了属性的顺序，我想我是懒惰了！顺便说一句，链接小猫示例！：-）