Использование множественных фоновых изображений CSS: основы
10 апреля 2019 | Опубликовано в css | 1 Комментарий »
С помощью кода CSS можно контролировать фон элементов. Можно задать свойство цвета фона или свойство изображения фона, или даже оба одновременно, чтобы выбрать и цвет, и изображение:
body { background-color: red; background-image: url(pattern.png); }
Также можно использовать SVG изображение как фон, встроенный в код CSS как закодированное изображение:
Выше закодировано только одно повторяющееся изображение, но, если нужно, можно задать несколько фоновых изображений. Это делается с помощью разделения их значений запятыми:
body { background-image: url(image-one.jpg), url(image-two.jpg); }
Если воспользоваться записью выше, то image-one.jpg будет повторяться и полностью закроет собой image-two.jpg. Но можно контролировать положения изображений отдельно с помощью других свойств фона:
body { background-image: url(image-one.jpg), url(image-two.jpg); background-position: top right, /* Эта запись задает расположение первого изображения */ bottom left; /* Эта запись задает расположение второго изображения */ background-repeat: no-repeat; /* Эта запись применяется к обоим изображениям */ }
Обратите внимание, у свойства расположения фона значения тоже разделены запятыми. Они применятся каждый только к соответствующему изображению. И после этого как у свойства повтора фона есть только одно значение. Можно задать таким же образом, как у предыдущего свойства, два значения, но если задать только одно, оно применится к обоим изображениям.
А вот пример использования четырех отдельных изображений в каждом углу, размещенных со смещением:
К сожалению, нельзя поворачивать или отражать изображения, а если бы можно было, то нам хватило бы только одного. Но можно поворачивать или отражать элементы или псевдоэлементв полностью, так что в подходящих случаях можно использовать только одно изображение:
Несколько важных моментов:
- Порядок наложения множественных фоновых изображений друг на друга — первое будет сверху.
- Можно использовать градиенты с помощью свойства фонового изображения. Например, можно создать прозрачный градиент поверх растрового изображения:
Автор урока Chris Coyier
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
- Создание дизайна в стиле старых компьютерных терминалов
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
193
19 января 2021 в 21:59
7yS2Ky tbklaifvaayb, [url=http://pztbfepmzoxy.com/]pztbfepmzoxy[/url], [link=http://mkpblvumjubc.com/]mkpblvumjubc[/link], vhuemqoyrbfb.com
Ответить