Множественные CSS-фоны для одного HTML-элемента
- Опубликовано:
Не так давно W3C сподобился-таки включить в спецификацию CSS механизм определения множественных фоновых изображений для одного элемента. Осталось лишь подождать пару лет, пока этот модуль переедет в статус окончательной версии, и ещё лет 5, пока это получит массовую поддержку в реальных браузерах, и счастью кодера не будет предела.
Коллеги, хоть раз верставшие резиновые конструкции типа следующей, меня поймут:
Определение каждого слоя фона предлагается отделять от предыдущего запятой, например, при использовании сокращённого CSS-синтаксиса:
background: url(a.png) no-repeat,
url(b.png) repeat-x,
url(c.png) 100% 100% repeat-y;
или в развёрнутой форме:
background-image: url(a.png), url(b.png), url(c.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 0 0, 0 0, 100% 100%;
При этом самым верхним фоновым слоем является указанный первым, самым нижним — последний.
Примечательно, что если указать в свойстве, например, background-repeat
суммарно больше значений, чем указано в свойстве background-image
, то значения background-image
начинают как бы повторяться, например:
background-image: url(a.png), url(b.png);
background-repeat: no-repeat, repeat-x, repeat-y, repeat;
равносильно:
background-image: url(a.png), url(b.png), url(a.png), url(b.png);
background-repeat: no-repeat, repeat-x, repeat-y, repeat;
Одно неясно: почему для этого надо было ждать CSS3.