4

我需要通过 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 );

不起作用。

4

1 回答 1

7

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

  • 速记属性是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()完全移除颜色，只留下图形和渐变色。

于 2013-04-02T14:24:42.530 回答