Множинні фони в 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-
- Як міняти картинку при наведенні курсору миші
- Як зробити слайдер на чистому css3 без використання jаvascript.
- Як зробити тінь на css
- Як зробити фон картинкою
- Як зробити тест в excel.
- Що таке css спрайт?
- Як задавати градієнти в css3.
- Як зробити блоки зі слайдер ефектом на чистому css3.
- Як зробити індикатор прокрутки на css3.
- Щоб розмір таблиці excel змінювався автоматично.
- Плавні переходи в css3.
- Тіні для тексту і блоків.
- Закруглені кути через css
- Зміна розмірів div на jаvascript
- Css3 псевдокласи: in-range, out-of-range, indeterminate.
- Коментарі у вигляді бульбашки.
- Верстаємо круглі кнопки на css3.
- Закруглені кути на css3.
- Виділити дату, день тижня в excel за умови.
- Приклади тіней на css.
- Dog ear effect, або ефект загнутого куточка на css.