Від автора: у даній статті ми з вами розглянемо одне з найстаріших і відомих властивостей 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: bottom right;
}
Чи скорочений варіант background, всі значення вказуються після url:
#workspace {
width: 100%;
max-width: 668px;
height: 400px;
background: #525d62 url(images/macbook.png) no-repeat bottom right;
}
З виходом 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 ознак прогресу не спостерігається.
