Использование порядка расположения множественных фоновых изображений
24 марта 2019 | Опубликовано в css | Нет комментариев »
Множественные фоновые изображения — интересная возможность CSS3. Синтаксис прост: нужно только разделить значения разных изображений запятой. Нам кажется, что проще и лучше использовать сокращенную запись свойства фона, в которой можно задать расположение, повторение и другие параметры, и при этом все будет сгруппировано и понятно.
Может быть, не совсем очевидно из синтаксиса, какое изображение располагается выше в «стопке» изоражений, там, где изображения накладываются друг на друга. Спецификация однозначно отвечает на этот вопрос, и реализации браузеров поддерживают это правильно. Первое изображение находится на самом верху, а следующие — ниже него в соответствующем порядке:
background: url(number.png) 600px 10px no-repeat, /* на самом верху, соответствует z-index: 4; */ url(thingy.png) 10px 10px no-repeat, /* соответствует z-index: 3; */ url(Paper-4.png); /* в самом низу, соответствует z-index: 1; */
Можно сказать, что это соответствует свойству z-index, но это не это свойство, так как все изображения — часть одного элемента.
Возможно, это не совсем интуитивно понятно, так как это прямо противоположно тому, как работает код HTML по умолчанию. Если у всех элементов одинаковое значение свойства z-index и они расположены так, что накрывают друг друга, то последний, а не первый элемент будет на самом верху. Но это надо просто понять и запомнить.
Еще очень важно запомнить, что если нужно использовать одно изображение как полностью непрозрачное или полностью повторяющееся фоновое изображение, его нужно разместить в списке фоновых изображений последним, а не первым, иначе оно закроет собой остальные фоновые изображения.
Так же не забывайте, что хотя свойство множественных фоновых изображений очень широко поддерживается, в старых версиях браузеров, не поддерживающих это свойство, при его применении не будет показано ничего. Так что будьте внимательн и, если по каким-то причинам Вам нужна поддержка старых версий браузеров, используйте библиотеку JavaScript Modernizr. У них даже есть пример подобного использования на сайте:
.multiplebgs body { /* Отличные множественные фоновые изображения */ } .no-muliplebgs body { /* Невпечатляющий запасной вариант */ }
Автор урока Chris Coyier
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Создание дизайна в стиле старых компьютерных терминалов
- Last year, ErisX closed a round of financing for Series B, managing to raise over million from such companies as Bitmain, ConsenSys, Fidelity Investments, Nasdaq Ventures, and Monex Group.
- Выбор брокера имеет огромное значение, так как Вам с этим брокером непосредственно работать.
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
73
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- 12 сайтов, на которых можно продавать свои работы
62
- Дизайн схемы проезда
62
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58