Як використовувати кілька фонових зображень за допомогою CSS

CSS3 дозволяє додавати кілька фонових зображень для одного елемента, використовуючи список значень через коми, щоб вказати необхідну кількість фонів.

Список значень background-position та/або background-repeat, які розділені через коми, задають положення та повторення відповідно для кількох фонових зображень:

div
< background-image:url(image1), url(image2), url(image3); background-position:center right, right bottom, center top;  background-repeat:no-repeat, repeat-y, repeat-x; >

У цьому прикладі image1 має положення center-right і не повторюється, image2 має положення right bottom і повторюється по вертикалі, а image3 має положення center top і повторюється по горизонталі.

Це один із способів встановлення кількох зображень. Можна встановити зображення за допомогою властивості background-image, потім вказати положення зображення за допомогою властивості background-position та вказати повторення зображень за допомогою властивості background-repeat.

Другий спосіб додавання кількох зображень це використання властивості background:

div
< background: url("image1") no-repeat center bottom,  url("image2") no-repeat center top, blue; >

При використанні властивості background-color для кількох фонових зображень колір застосовується наприкінці всіх фонових зображень. Як бачите у наведеному вище прикладі, синій колір вказується в кінці.

Давайте дізнаємося, як покроково створити кілька фонових зображень за допомогою CSS!

1. Виберіть три зображення. Вони повинні мати невеликий розмір, щоб ви змогли побачити, як працюють властивості background-position та background-repeat.
2. Створіть простий HTML документ з елементом.
3. Застосуйте стиль до елемента і не забудьте встановити для нього ширину та висоту.

А зараз побачимо результат!

приклад

html>
html>
head>
title>Заголовок документа title>
style>
.example
< width: 100%; height: 500px; background: url("http://www.cliparthut.com/clip-arts/26/vista-aero-pack2-transparent-png-icon-download-free-vector-clipart-M3rZlU.png") no-repeat  10%
110%, url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png") no-repeat  120%
700% , #002054; > style> head>
body>
div
class="example"> div> body> html>

Розглянемо інший приклад:

приклад

html>
html>
head>
title>Заголовок документа title>
style>
#example< margin:0; padding:0; position: absolute;  top: 0; left:0; bottom: 0; width: 100%; height: 70%; background-image: url("https://userscontent2.emaze.com/images/d56242ef-c20d-4350-9877-321cb4523328/7c5cdc4d9f6bf00f3fb279f51d7d23fc.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/239518/birds2.svg"), url("http://www.transparentpng.com/thumb/clouds/W5czgG-blue-clouds-png-icon.png"), linear-gradient(to bottom,  rgba(255,255,255,0), 40%,rgba(255,255,255,1) 60%); background-size: 20%, 20%, 100%, 100%, 50px; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x,repeat;  background-position: 5%
40%, 95%
60%, center bottom; > > style> head>
body>
div
id="example"> div> body> html>

CSS Кілька фонів

CSS дозволяє додавати кілька фонових зображень елемента через властивість background-image .

Різні фонові зображення розділені комами, і зображення накладаються один на одного, де перше зображення знаходиться найближче до глядача.

У наступному прикладі є два фонових зображення, перше зображення - квітка (вирівняна по нижньому та правому краях), а друге зображення - фон паперу (вирівняний по верхньому лівому кутку):

приклад

#example1 <
background-image: url(../images/img_flwr.gif), url(../images/paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
>

Кілька фонових зображень можна вказати, використовуючи окремі властивості фону (як зазначено вище), або скорочена властивість background .

У наступному прикладі використовується скорочена властивість background (той самий результат, що й у прикладі вище):

приклад

#example1 <
background: url(../images/img_flwr.gif) right bottom no-repeat, url(../images/paper.gif) left top repeat;
>

CSS Розмір фону

CSS властивість background-size дозволяє вказати розмір фонових зображень.

Розмір можна вказати в довжинах, відсотках або за допомогою одного із двох ключових слів: contain або cover.

У наступному прикладі фонове зображення змінюється у розмірах значно менше вихідного зображення (з використанням пікселів):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

У wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

приклад

#div1 <
background: url(../images/img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
>

Два інші можливі значення для background-size це contain і cover .

Ключове слово contain масштабує фонове зображення до максимально можливого розміру (але його ширина та висота повинні вписуватися в область вмісту). Таким чином, залежно від пропорцій фонового зображення та області розташування фону можуть бути деякі області фону, які не покриті фоновим зображенням.

Ключове слово cover масштабує фонове зображення таким чином, щоб область вмісту повністю покривалася фоновим зображенням (його ширина і висота дорівнюють або перевищують область вмісту). По суті деякі частини фонового зображення можуть бути не видно в області розташування фону.

Наступний приклад ілюструє використання contain і cover:

приклад

#div1 <
background: url(../images/img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
>
#div2 <
background: url(../images/img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
>

Визначити розміри кількох фонових зображень

Властивість background-size також приймає кілька значень для розміру фону (використовуючи список через кому), під час роботи з кількома фонами.

У наступному прикладі вказано три фонові зображення з різними значеннями фону для кожного зображення:

приклад

#example1 <
background: url(../images/img_tree.gif) left top no-repeat, url(../images/img_flwr.gif) right bottom no-repeat, url(../images/paper.gif) left top repeat ;
background-size: 50px, 130px, auto;
>

Повнорозмірне фонове зображення

Тепер ми хочемо, щоб на веб-сайті було фонове зображення, яке б постійно покривало все вікно браузера.

• Заповнити всю сторінку із зображенням (без пробілів)
• Масштабувати зображення в міру необхідності
• Центрувати зображення на сторінці
• Не викликати смуги прокручування

У наступному прикладі показано, як це зробити; використовуйте елемент (елемент завжди дорівнює принаймні висоті вікна браузера). Потім встановіть фіксований та центрований фон. Потім налаштуйте його розмір за допомогою властивості background-size:

приклад

Образ героя

Ви також можете використовувати різні властивості фону для створення образу героя (велике зображення з текстом) і розмістити його там, де ви хочете.

приклад

.hero-image <
background: url(../images/img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
>

CSS властивість background-origin

CSS властивість background-origin вказує, де розміщено фонове зображення.

Властивість приймає три різні значення:

• border-box - фонове зображення починається з верхнього лівого кута рамки
• padding-box - (за замовчуванням) фонове зображення починається з верхнього лівого кута краю відступу
• content-box - фонове зображення починається з верхнього лівого кута вмісту

У наступному прикладі показано властивість background-origin:

приклад

#example1 <
border: 10px solid black;
padding: 35px;
background: url(../images/img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
>

CSS властивість background-clip

CSS властивість background-clip визначає область малювання тла.

Властивість приймає три різні значення:

• border-box - (за замовчуванням) фон зафарбовується до зовнішнього краю кордону
• padding-box - фон зафарбовується до зовнішнього краю відступу
• content-box - фон зафарбовується всередині поля вмісту

У наступному прикладі показано властивість background-clip :

приклад

#example1 <
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
>

Перевірте себе за допомогою вправ!

CSS Розширені властивості фону