什么是使用多个CSS背景图像/渐变时，正确的语法速记？ [英] what's the correct shorthand syntax when using multiple css background images/gradients?

问题描述

我需要通过CSS多背景附加到一个元素，我不能使用：前/：在

我不知道怎样才是正确的语法使用多个CSS背景图像。

有是一堆的建议的方式，我发现，像这里或这里，但我可以得到这些都不：

 背景：网址（...）0的重复，URL（...）为5px为5px不重复#FFF;
背景：网址（...）600px的10px的不重复，URL（...）10px的10px的不重复;
 

工作

这是我目前有：

 背景图片：RGBA（0，0，0，0.4）URL（IMG /图标-18-white.png）不重复0％50％，直链梯度（＃9ad945，＃7eb238）;
 

这是忽略不计。只有当我提供纯净的URL，它的工作原理：

 背景图像：网址（IMG /图标-18-white.png），线性渐变（＃9ad945，＃7eb238）;
 

问：结果
我专门寻找一种方法来设置背景大小/位置/重复每幅图像，因此，如果有人可以点我正确的语法，将是非常好的！

修改：
添加滚动和替换背景图片与背景

 背景：RGBA（0，0，0，0.4）URL（HTTP：//$c$c.jquery.com/mobile/1.3.0/images/icons- 18 white.png）不重复滚动0％50％，线性渐变（＃9ad945，＃7eb238）;
 

不起作用。

解决方案

有两个主要问题与你有什么工作，从该prevent是：

• 速记属性是背景，而不是背景图片。




• 的背景颜色，而你的情况是 RGBA（0，0，0，0.4），必须最后指定。

如果简化语法结束了太混乱了，你总是可以分别设置各个属性，将它们传递相同数量的对应的背景层的层数逗号分隔值（CSS渐变被认为是图像）。但是，如果您设置背景颜色则只能指定一次。

请记住，指定多个背景时，它们被绘制的顺序是第一个到最后，从上到下。这就是为什么颜色，预计最后进来的速记声明。 规范本节描述的那样，同时的本节包含了完整的语法：

  

值： [＆LT; BG-层＆gt; ，*＆LT;最后-BG-层​​＆gt;

  
  

其中，

  
  

＆LT; BG-层＆gt; = LT; BG-图像＆GT; || ＆LT;＆位置GT; [/＆LT; BG-大小＆GT; ]？ || ＆LT;重复式＆GT; || ＆LT;＆附件GT; || ＆LT;盒子GT; {1,2}＆所述;终-BG-层​​＆gt; = LT; BG-图像＆GT; || ＆LT;＆位置GT; [/＆LT; BG-大小＆GT; ]？ || ＆LT;重复式＆GT; || ＆LT;＆附件GT; || ＆LT;盒子GT; {1,2} || ＆LT;'背景色'＆GT;


有关各个属性层次感的细节可以在各自的章节中找到。

如果你想在一个 RGBA（）颜色叠加的背景图形，你可能不能够添加层之下的梯度不应用渐变一个：之前盒代替。另外，如果你进入渐变停止自己混合40％的黑色为主色调，你可以删除 RGBA（）颜色共只留下图形和梯度。

I need to attach multiple backgrounds to an element via CSS and I can't use :before/:after.

I'm wondering what the correct syntax to use multiple CSS background image is.

There is a bunch of suggested ways I found, like here or here, but I can get neither of these:

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

to work.

This is what I currently have:

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

which is ignored. Only when I supply the pure url, it works:

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

Question:
I'm specifically looking for a way to set background-size/position/repeat per image, so if someone could point me to the correct syntax, would be really nice!

EDIT: Adding scroll and replacing background-image with 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 );

does not work.

解决方案

There are two main issues with what you have that prevent it from working:

• The shorthand property is background, not background-image.

• The background color, which in your case is rgba(0, 0, 0, 0.4), must be specified last.

If the shorthand syntax ends up too confusing, you can always set the individual properties separately, passing them the same number of comma-separated values corresponding to the number of background layers (CSS gradients are considered to be images). However if you set background-color you may only specify it once.

Remember that when specifying multiple backgrounds, the order in which they are drawn is first to last, top to bottom. This is why the color is expected to come last in a shorthand declaration. This section of the spec describes it, while this section contains the full syntax:

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'>

Details about layering in individual properties can be found in their respective sections.

If you're trying to superimpose the background graphic over an rgba() color, you may not be able to add a gradient beneath that layer without applying the gradient to a :before box instead. Alternatively, if you mix the 40% black color into the gradient stops themselves, you can remove the rgba() color altogether leaving just the graphic and the gradient.

这篇关于什么是使用多个CSS背景图像/渐变时，正确的语法速记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！