CSS свойство Background

CSS свойство Background

От автора: в данной статье мы с вами рассмотрим одно из старейших и известных свойств css background. Про особенности данного свойства часто забывают. В CSS3 оно получило обновление, были добавлены возможности не только по добавлению фонового изображения или цвета. Рассмотрим некоторые из них!

Смещение background position

Позиционирование фонового рисунка довольно простой процесс, с которым вы, скорее всего, уже знакомы. Если мы хотим прижать фон к нижнему правому углу элемента, мы пишем background-position: bottom right. К примеру:

Или сокращенный вариант background, все значения указываются после url:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

С выходом CSS3 мы теперь можем задавать смещение позиции; точное расстояние до заданной позиции. В нашем примере bottom right мы можем добавить bottom 20px right 30px, и наш фон будет смещен на 20px от нижней границы и на 30px от левой.

Позиционирование (bottom, top, right, left) можно задавать в любом порядке, однако длина смещения задается четко после каждого значения.

Несколько фоновых изображений

Свойство background позволяет добавлять несколько фоновых изображений. Давайте добавим в демо выше несколько новых гаджетов и вещей.

Все эти изображения мы записали в одном свойстве background или background-image, отделив каждое запятой. Для расположения каждого изображения мы воспользовались свойством background-position, которое также может принимать несколько значений.

Можно использовать фиксированные единицы измерения (px), гибкие (проценты) или их комбинацию. Каждая пара значений это координаты от левого верхнего угла контейнера до левого верхнего угла изображения. К примеру, верхний левый угол камеры расположен на 280px от верхней границы контейнера и на 7% доступной ширины от левой границы.

Заметка: Доступная ширина это вся ширина контейнера минус ширина фонового изображения. Именно поэтому фоновое изображение со значением позиционирования 50% по ос Х расположено точно по центру!

Движение

Так как background-position поддается анимации, мы можем создать более живое фоновое изображение:

В коде мы задали несколько keyframes анимаций. В каждой отдельной анимации мы изменяем значения background-position-x и background-position-y для каждого изображения. Созданная мной анимация не так хороша, так что можете зайти на CodePen и подправить ее! Замечание: Чтобы увидеть анимацию, нажмите на кнопку Rerun внизу справа.

Пара важных замечаний

Все фоновые рисунки добавляются последовательно; самое первое изображение в списке находится наверху стека, а последнее в самом низу.

Все дополнительные background свойства (background-repeat, background-size, background-position и т.д.) могут задаваться несколько раз кроме background-color. Если мы прописываем несколько фоновых рисунков с помощью сокращенного свойства background, добавляйте цвет фона к самому последнему, чтобы он сработал. К примеру:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Или можете добавить отдельное свойство background-color сразу после сокращения:

Оба варианта делают то же самое, но последний мне кажется более интуитивным и читаемым.

Смешение фоновых изображений

Свойство background-blend-mode работает точно так же, как в графических редакторах Photoshop или Gimp; оно смешивает фоновые изображения в одно. Учитывается также слой под изображениями.

Свойство background-blend-mode принимает похожие значения, такие как overlay и multiply, а также и другие. Все значения Jonathan Cutrell объясняет в своей статье на эту тему. Настойчиво рекомендую вам прочесть данную статью, чтобы мы смогли перейти сразу к примерам.

Для создания яркого дизайна CSS Blend Mode можно использовать несколькими путями. Можно смешивать градиент с обычным изображением, как это делает Ian Yates в своей статье.

Для создания такого эффекта мы взяли фоновое изображение и градиент и применили режим наложения overlay.

Наложение влияет на оба фоновых изображения, так что будьте осторожны, если не хотите, чтобы у вас все перемешалось. Если вы не хотите, чтобы все смешивалось с фоновым цветом, задайте второе значение normal ко второму фоновому изображению.

Обрезка фонового изображения

Свойство background-clip это утилита, которая контролирует то, как фоновое изображение или цвет располагаются внутри CSS content box. Так же как и свойство box-sizing, background-clip принимает три значения:

border-box – значение по умолчанию, установив которое, фоновое изображение или цвет распространяется до самой внешней границы элемента.

padding-box растянет фон до внешней границы padding’а, или другими словами до внутренней границы border.

content-box растянет фон в пределах контента, как показано ниже:

Один практический пример, когда мне понадобилось свойство background-clip, это когда мне нужно было создать кнопку с иконкой с помощью одного элемента. В демо ниже фоновое изображение растягивается от левого до правого края элемента, даже если с каждой стороны добавить паддинг. Такого эффекта можно достичь, если задать значение border-box.

Если нам понадобится добавить белое пространство вокруг иконки, нам нужно обернуть иконку в дополнительный контейнер и задать ему паддинг. В background-clip мы можем сделать это более элегантно, задав значение content-box, а паддинг заменить рамкой того же цвета, как и фон.

Заключение

Свойство background одно из самых часто используемых. Надеюсь, данная статья напомнила вам различные способы применения данного свойства. Жду ваших идей в комментариях.

Последнее замечание: браузеры превосходно поддерживают данные свойства (кроме background-blend-mode). По данным сайта CanIUse множественный фон поддерживается в IE9 и выше с небольшими проблемами. Различные опции с фоновыми изображениями, такие как свойство background-clip, также поддерживаются с примечаниями.

Blending Mode на момент написания статьи лучше всего поддерживался в Chrome, Opera и частично в Safari с некоторыми багами. К сожалению в Microsoft Edge признаков прогресса не наблюдается.

Автор: Thoriq Firdaus

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree