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

Question

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

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

我找到了一堆建议的方法，比如这里或这里，但我不能得到这些：

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，则只能指定一次。

请记住，当指定多个背景时，它们的绘制顺序是先到后，从上到下。这就是为什么在速记声明中颜色应该排在最后的原因。规范的这一部分描述了它，而这一部分包含完整的语法：

价值： [ <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()完全去除颜色，只留下图形和渐变。