CSS Кілька фонів
В цьому розділі ви дізнаєтесь, як додати кілька фонових зображень до одного елемента.
Ви також дізнаєтесь про наступні властивості:
background-sizebackground-originbackground-clip
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.
Ut 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;
}
Спробуйте самі »
Фонове зображення на весь розмір
Тепер ми хочемо, щоб на вебсайті було фонове зображення, яке постійно вкривало б все вікно браузера.
Вимоги наступні:
- Заповнити всю сторінку із зображенням (без пробілів)
- Масштабувати зображення по мірі необхідності
- Центрувати зображення на сторінці
- Не викликати смуги прокрутки
В наступному прикладі показано, як це зробити; використовуйте елемент <html> (елемент <html> завжди дорівнює по крайній мірі висоті вікна браузера). Потім встановіть фіксований і відцентрований фон. Потім налаштуйте його розмір за допомогою властивості background-size:
Приклад
html {
background: url(../images/img_man.jpg) no-repeat center fixed;
background-size: cover;
}
Спробуйте самі »
Образ героя
Ви також можете використовувати різні властивості фону для <div>, щоб створити образ героя (велике зображення з текстом) і розмістити його там, де ви хочете.
Приклад
.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 Розширені властивості фону
| Властивість | Опис |
|---|---|
| background | Скорочена властивість для встановлення всіх властивостей фону в одному оголошенні |
| background-clip | Визначає область малювання фону |
| background-image | Визначає одне або кілька фонових зображень для елемента |
| background-origin | Визначає, де розташовані фонові зображення |
| background-size | Визначає розмір фонового зображення |
