CSS

背景：线性渐变（到底部，＃98cb01 2％，＃60a822 100％）重要;！

Answer 1

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

多个背景图片是CSS3的一个很酷的功能。语法是很容易，你只需用逗号分隔它们。我发现它最简单/最好用背景速记属性，所以你可以声明位置和重复和诸如此类，并将它们全部组合在一起。什么不是在查看语法时，显而易见的是哪个图像位于顶部这些图像重叠时的垂直堆叠顺序。规范很清楚在这方面，浏览器的含义如下。第一个是在顶部他们从那里下来。

<强> CSS

background: 
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);                      /* On bottom, like z-index: 1; */

它就像z-index，但这不是z-index，它是一个单一的部分   元件。

我认为这有点令人困惑，因为它与HTML的方式相反   工作自然。如果所有元素都具有相同的z-index（并且是   以某种方式定位并重叠）最后一个元素将位于顶部，   不是第一个。虽然不是那么大的交易，但只需要学习它   一次。

要记住的重要一点是，如果你要使用其中一个   完全不透明/完全重复图像的背景，列出一个   最后不是第一个，否则它将覆盖所有其他人。

还要记住，虽然多个背景是完全激进的，但是   不支持它的浏览器的后备是它显示   什么都没有背景，所以要小心。最好的方法   像往常一样处理它是Modernizr。他们甚至将它用作演示   在他们网站的主页上（为清晰起见调整）：

<强> CSS

.multiplebgs body 
{
    /* 
       Awesome multiple BG declarations that 
       transcend reality and impress chicks 
    */
}
.no-multiplebgs body 
{
    /* laaaaaame fallback */
}

因此，对于您的示例，您可以这样做：

background: 
   url(number.png) 600px 10px no-repeat,  
   linear-gradient(to bottom, #98cb01 2%,#60a822 100%)!important;

CSS：背景图像与背景渐变

CSS

1 个答案: