CSS : Background Image with Background Gradient

Question

如何将 url 背景图像添加到渐变中并具体定位？因为梯度本身被当作图像

CSS

background: linear-gradient(to bottom, #98cb01 2%,#60a822 100%)!important;

Answer 1

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

Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it's easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn't obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear in this regard and browser implimentations follow. The first is on top and they go down from there.

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; */

It's like z-index but this isn't z-index, it's parts of one single element.

I think it's slightly confusing, since it's the opposite of how HTML works naturally. If all elements have the same z-index (and are positioned in some way and overlap) the last element will be on top, not the first. Not that big of a deal though, just need to learn it once.

The big thing to remember is that if you were to use one of the background for a fully opaque / fully repeating image, list that one last not first, otherwise it will cover all the others up.

Also remember that while multiple backgrounds is totally radical, the fallback for browsers that don't support it is that it displays nothing at all for the background, so be careful there. The best way to handle it, as always, is Modernizr. They even use it as the demo right on the homepage of their site (adjusted for clarity):

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;