Множественные CSS-фоны для одного HTML-элемента
2005-06-11
Не так давно W3C сподобился-таки включить в спек CSS3 механизм определения множественных фоновых изображений для одного элемента. Осталось лишь подождать пару лет, пока этот модуль переедет в статус окончательной версии, и ещё лет 5, пока это получит массовую поддержку в реальных браузерах, и счастью кодера не будет предела.
Коллеги, хоть раз верставшие резиновые конструкции типа следующей, меня поймут:
Определение каждого слоя фона предлагается отделять от предыдущего запятой, например, при использовании сокращённого CSS-синтаксиса:
background: url(bgA.gif) no-repeat, url(bgB.gif) repeat-x, url(bgC.gif) 100% 100% repeat-y;
или в развёрнутой форме:
background-image: url(bgA.gif), url(bgB.gif), url(bgC.gif);
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(bgA.gif), url(bgB.gif);
background-repeat: no-repeat, repeat-x, repeat-y, repeat;
равносильно:
background-image: url(bgA.gif), url(bgB.gif), url(bgA.gif), url(bgB.gif);
background-repeat: no-repeat, repeat-x, repeat-y, repeat;
Одно неясно: почему для этого надо было ждать CSS3.
Комментарии