Множественные CSS-фоны для одного HTML-элемента
- Опубликовано:
Не так давно 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.
Комментарии | добавить
Для настоящего времени это пока научная фантастика.
Футуристические мечты и не более(((, а как бы хотелось.
И на мой взгляд нелогично было расставлять приоритет на пераметр в порядке убывания.
После выхода IE9 множественные фоновые изображения будут поддерживаться в последних версиях всех 5-ти основных браузеров (Firefox, IE, Opera, Chrome, Safari). Таким образом, теперь, спустя «всего» 5 лет можно начать использовать эту возможность на уровне graceful degradation (например, с помощью JavaScript-библиотеки Modernizr).
Что касается порядка перечисления, расстраивает другое: как и в ряде других случаев, авторы спецификации CSS продумали возможность лишь частично, в случае множественных фоновых изображений не предусмотрев способа каскадным образом переопределить отдельно взятый фоновый слой. К сожалению, разработкой спецификаций CSS, похоже, занимаются теоретики, далёкие от реальной практики.