CSS свойство Background

CSS свойство Background

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

Смещение background position

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

#workspace {
    width: 100%;
    max-width: 668px;
    height: 400px;
    background-color: #525d62;
    background-image: url(images/macbook.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}

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

#workspace {
    width: 100%;
    max-width: 668px;
    height: 400px;
    background: #525d62 url(images/macbook.png) no-repeat right bottom;
}

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

#workspace {
    width: 100%;
    max-width: 668px;
    height: 400px;
    background-color: #525d62;
    background-image: url(images/macbook.png);
    background-repeat: no-repeat;
    background-position: right 30px bottom 20px;
}

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

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

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

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

#workspace {
    height: 400px;
    background-color: #525d62;
    background-image: 
        url(images/macbook.png),
        url(images/mouse.png),
        url(images/hdd.png),
        url(images/phone.png),
        url(images/ipad.png),
        url(images/coffee.png),
        url(images/camera.png);
    background-repeat: no-repeat;
    background-position: 
            50% 50%,   /* macbook.png */
            75% 295px, /* mouse.png */
            75% 230px, /* hdd.png */
            96% 240px, /* phone.png */
            20% 250px, /* ipad.png */
            22% 190px, /* coffee.png */
            7% 280px; /* camera.png */
}

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

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

Движение

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

#workspace {
    width: 600px;
    height: 400px;
    background-color: #525d62;
    background-repeat: no-repeat;
    background-image: 
        url(images/macbook.png),
        url(images/mouse.png),
        url(images/hdd.png),
        url(images/phone.png),
        url(images/ipad.png),
        url(images/coffee.png),
        url(images/camera.png);
    background-position: 
        50% 50%, 
        430px 295px, 
        425px 230px, 
        480px 240px, 
        105px 250px, 
        120px 190px, 
        40px 280px;
    animation: 3s ease 0s inView forwards;
}
@keyframes inView {
    0% {
        background-position-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px;
        background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
    }
    20% {
        background-position-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px;
        background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
    }
    30% {
        background-position-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px;  
        background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
    }
    40% {
        background-position-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px;
        background-position-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%;
    }
    50% {
        background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
        background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%;
    }
    60% {
        background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
        background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%;
    }
    100% {
        background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; 
    }
}

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

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

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

#workspace {
    width: 600px;
    height: 400px;
    background-color: #525d62;
    background-image: 
        url(images/macbook.png),
        url(images/mouse.png),
        url(images/hdd.png),
        url(images/phone.png),
        url(images/ipad.png),
        url(images/coffee.png),
        url(images/camera.png); /* внизу стека */
    background-repeat: no-repeat;
}

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

#workspace {
    height: 400px;
    background: 
        url(images/macbook.png) 50% 50% no-repeat,
        url(images/mouse.png) 430px 295px no-repeat,
        url(images/camera.png) 425px 230px no-repeat #525d62;
}

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

#workspace {
    width: 600px;
    height: 400px;
    background: 
        url(images/macbook.png) 50% 50% no-repeat,
        url(images/mouse.png) 430px 295px no-repeat,
        url(images/camera.png) 425px 230px no-repeat;
    background-color: #525d62;
}

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

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

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

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

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

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

#blend {
    background-repeat: no-repeat;
    background-image: url( 'img/people-15.jpg' ),
                      linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%);
    background-blend-mode: overlay;
}

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

#blend {
    background-repeat: no-repeat;
    background-image: url( '../img/people-15.jpg' ),
                      linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%);
    background-color: yellow;
    background-blend-mode: 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 с нуля до результата!

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

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree