CSS свойство Background

Дата публикации: 2016-03-29

От автора: в данной статье мы с вами рассмотрим одно из старейших и известных свойств 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;
}

#workspace {

width: 100%;

max-width: 668px;

height: 400px;

background-color: #525d62;

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;
}

#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;
}

#workspace {

width: 100%;

max-width: 668px;

height: 400px;

background-color: #525d62;

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 */
}

#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; 
    }
}

#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;
}

#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;
}

#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;
}

#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;
}

#blend {

background-repeat: no-repeat;

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;
}

#blend {

background-repeat: no-repeat;

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 признаков прогресса не наблюдается.