css - 使用多个 css 背景图像/渐变时，正确的速记语法是什么？

Question

我需要通过 CSS 将多个背景附加到一个元素，但我不能使用 :before/:after .

我想知道使用多个 CSS 背景图像的正确语法是什么。

我发现了很多建议的方法，比如 here或 here ，但我不能得到这些:

background: url(…) 0 0 repeat, url(…) 5px 5px no-repeat #FFF;
background: url(…) 600px 10px no-repeat, url(…) 10px 10px no-repeat;

上类。

这是我目前拥有的:

background-image: rgba(0, 0, 0, 0.4) url("img/icons-18-white.png") no-repeat 0% 50%,linear-gradient( #9ad945, #7eb238 );

这是被忽略的。只有当我提供纯 url 时，它才有效:

background-image: url("img/icons-18-white.png") , linear-gradient( #9ad945, #7eb238 );

问题:
我正在寻找一种设置 background-size/position/repeat 的方法每个图像，所以如果有人能指出我正确的语法，那就太好了!

编辑 :
添加 scroll并替换 background-image与 background

background: rgba(0, 0, 0, 0.4) url("http://code.jquery.com/mobile/1.3.0/images/icons-18-white.png") no-repeat scroll 0% 50%, linear-gradient( #9ad945, #7eb238 );

不起作用。

Answer 1

你所拥有的东西有两个主要问题阻止它工作:

速记属性是 background ，不是 background-image .

背景颜色，在您的情况下是 rgba(0, 0, 0, 0.4) , 必须最后指定。

如果简写语法最终过于困惑，您总是可以单独设置各个属性，向它们传递与背景层数相对应的相同数量的逗号分隔值(CSS 渐变被认为是图像)。但是，如果您设置 background-color您只能指定一次。
请记住，当指定多个背景时，它们的绘制顺序是先到后，从上到下。这就是为什么在速记声明中颜色应该排在最后的原因。 This section of the spec描述它，而 this section包含完整的语法:

Value: [ <bg-layer> , ]* <final-bg-layer>

Where

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} 

<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>

有关各个属性中分层的详细信息，请参见它们各自的部分。
如果您尝试将背景图形叠加在 rgba() 上颜色，如果不将渐变应用于 :before，您可能无法在该图层下方添加渐变。盒子代替。或者，如果您将 40% 的黑色混合到渐变色标本身中，您可以删除 rgba()颜色完全留下图形和渐变。