Is it possible in CSS3 to have multiple background images with specific size for each of them?

问题

I have DIV which has 2 backgrounds, in my case, it is gradient and image. I want to change the size of the background image, but not the size of the gradient ? Is it possible ?

Please note: I don't want to use 2 DIVs, one for gradient and one for background image

EDIT:

<div id="button"></div>

#button { background: url(img.png) no-repeat 0.5em 0.5em, -webkit-gradient(linear, left top, left bottom, from(#74ae0f), to(#497105)); }

回答1:

Ok, by just simple coincidence I have found answer to my question. I couldn't find it anywhere on the internet, so I just tried this and it worked as I wanted:

background-size: 2em 2em, 100% 100%;

The first declaration "2em 2em" applies to background image and the second declaration "100% 100%" applies to background gradient. Therefore using the same order as both backgrounds were declared in background definition.

Now it seems simple and straightforward, but I didn't find it in any documentation or webpage.

回答2:

i think you can just add

-o-background-size: 80%, 30%; 
-webkit-background-size: 80%, 30%;    
-moz-background-size: 80%, 30%;
background-size: 80%, 30%;

来源：https://stackoverflow.com/questions/5867908/is-it-possible-in-css3-to-have-multiple-background-images-with-specific-size-for