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 );

被忽略。只有当我提供纯网址时，它才有效：

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

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

1 个答案: