Як використовувати кілька зображень для фону

Відео: Як видалити фон з зображень в Apple Keynote

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

Реальний приклад повідомлення знаходиться тут:

Подивитися прімерСкачать

Як використовувати кілька зображень для фону?

Раніше, щоб вставити кілька зображень на фон, доводилося в HTML сторінці прописувати кілька елементів і відповідні їм класи. Як на прикладі нижче:

Відео: Вибираємо фонове зображення для сайту. КЛАСНИЙ сервіс по підбору текстури для сайту

12345678910111213141516

.style1 {background-image: url("Images / image.jpg")-background-position: 150px 25px-}.style2 {background-image: url("Images / image.jpg")-background-position: 200px 10px-}.style3 {background-image: url("Images / image.jpg")-background-position: 250px 25px-}.style4 {background-image: url("Images / image.jpg")-background-position: 100px 10px-}

Але з можливостями CSS3 даний код можна скоротити, об`єднавши всі зображення в одну властивість background-image:

123456789101112

.weather {text-align: center-width: 100%-height: 100%-background-image:url("Images / overcast.jpg"),url("Images / rainbow.jpg"),url("Images / overcast.jpg"),url("Images / sunny.jpg")-background-position: 150px 25px, 200px 10px, 250px 25px, 100px 10px, 0 0-background-repeat: no-repeat-}