Несколько фонов css3 анимация

Question

Я боюсь, что этого нельзя сделать, но, тем не менее, это то, что, я думаю, должно быть в состоянии сделать.

У меня есть веб-страница, на которой тело имеет несколько фонов (один из которых сплошной,один черный, но только непрозрачность 0,2, а третий - текстура бумаги).Идея заключается в том, что сплошной цвет может быть изменен (затемнен с помощью CSS-переходов) в зависимости от определенных обстоятельств.Второй слой изменяется в непрозрачности, чтобы управлять темнотой цвета.

Проблема в том, что оба они сделаны независимо, и я не знаю способа изменить один из фонов, не объявляя их все.

например, я определяю исходные фоны следующим образом: background: url ("overlay.png"), rgba (0,0,0,0.3), -webkit-градиент (линейный, верхний, нижний, из(черный), (белый));

- отметьте, что я на самом деле не использую rgba (), поскольку это не сработает ( Несколько фонов CSS, цвет поверх изображения, игнорируется ) поэтому я использую градиент, который является твердым.Я хочу иметь возможность сделать что-то вроде:

background:, rgba (0,0,0,0.6) ,;ИЛИ background-2: rgba (0,0,0,0.6);

Возможно ли это?

Answer 1

Поместите несколько элементов div друг на друга и управляйте ими индивидуально.

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

тогда вы можете работать индивидуально на каждом слое.

или использовать несколько фонов в css

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

последний - CSS3 и может не иметь поддержки