Множинні фони в css3.

Відео: Основи CSS / CSS3

Всім привіт! У цій невеликій статті ми з вами розберемо, як задати кілька фонових зображень на CSS3.

HTML у нас знову такий же

Відео: GoToWeb - Відеокурс Html і Css, урок 23, Множинні фони

 




 
multibackgrounds 
charset="Utf-8"gt; 
 
class="Block"gt;

І прості стилі, щоб побачити наш блок, в який потім вставимо зображення

.block { 
 width:700px- 
 height:400px- 
 border:3px solid # 999- 
 margin:20px- 
 
 background-image: url(img1.jpg) - 
 background-repeat:no-repeat- 
 background-position: bottom center- 
}

В background-image ми вказуємо шлях до картинки, в background-repeat - повторювати або не повторювати картинку, а в background-position ми вказуємо позицію картинки в блоці: перше значення по горизонталі, друге по вертикалі. Значення так само можна задавати в px.

При використанні зображення, Ви можете використовувати колір. Тоді місце, де немає картинки, буде заповнено обраним вами кольором.

.block { 
/ * ... * / 
 background-color:# ccc- 
 background-image: url(img1.jpg) - 
 background-repeat:no-repeat- 
 background-position: bottom center- 
}

Ще одна корисна властивість background-attachment, яке дозволяє зафіксувати фон в одній позиції незалежно від того, як рухається блок.

/ * ... * / 
background-attachment:fixed-

background-size дозволяє змінювати розмір картинки.

background-size:50px200px-

Перше значення по горизонталі, друге за вертикалі.

Також дане властивість може мати текстові значення: contain і cover. Встановивши перше значення, картинка відмасштабуйте таким чином, щоб вона містилася повністю в нашому блоці, а при другому значенні картинка заповнить весь контейнер, і, якщо місця не вистачить, то буде обрізана.

Отже, ми розібрали всі основи фонових зображень і тепер поговоримо про множинні фони.

В CSS3 з`явилася можливість задавати кілька фонів одному блоку. Щоб це зробити, просто перерахуйте в background-image друге зображення через кому

background-image: url(img1.png), url(img2.png) -

Всі наші інші стилі, такі як background-repeat і т.д. будуть застосовані до всіх зображень. Щоб задати свої стилі для кожного фону, їх також потрібно перерахувати через кому. Тоді перше значення буде ставитися до першого фону, а друге - до другого.

background-repeat:no-repeat, repeat- 
background-position: left bottom, right center-

Так само зверніть увагу на те, що перша картинка в background-image буде відображатися вище другий, друга вища третин і т.д.

В кінці слід сказати, що всі ці властивості можна об`єднувати в одну властивість background.

background: url(img1.png) left bottom no-repeat, url(img2.png) right center repeat-

Поділися в соціальних мережах:

Схожі