使用多个 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 包含完整的语法：

值：[ <bg-layer> , ]* <final-bg-layer>

在哪里

<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() 颜色，只留下图形和渐变色。