Multiple backgrounds css3 animation

I fear that this can't be done but nevertheless it is something which I think should be able to be done.

I have a webpage where the body has multiple backgrounds (one is a solid colour, one is black but only 0.2 opacity and the third is a paper texture). The idea is that the solid colour can be changed (faded using CSS transitions) depending on certain circumstances. The second layer changes in opacity to manipulate the darkness of the colour.

The problem is both of these are done independently and I don't know of开发者_开发知识库 a way to change one of the backgrounds without having to declare them all.

e.g. I define the original backgrounds like this: background: url( "overlay.png" ), rgba(0,0,0,0.3), -webkit-gradient(linear,top,bottom,from(black),to(white));

-note that I don't actually use rgba() as that wouldn't work ( Multiple CSS backgrounds, colour over image, ignored ) so I use a gradient that is solid. I want to be able to do something like:

background: ,rgba(0,0,0,0.6),; OR background-2:rgba(0,0,0,0.6);

Is this possible?

place multiple divs on each other, and control them individually.

<div class="backgroundlayer1 backgroundlayer2 backgroundlayer3">
page in here
</div>

then you can work individualy on each layer.

or use multiple backkground in css

background-image:url(img1),url(img2);

last one is CSS3 and might lack support