Всім привіт! У цій невеликій статті ми з вами розберемо, як задати кілька фонових зображень на CSS3.
HTML у нас знову такий же
І прості стилі, щоб побачити наш блок, в який потім вставимо зображення
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-size дозволяє змінювати розмір картинки.
background-size: 50px 200px;
Перше значення по горизонталі. друге за вертикалі.
Також дане властивість може мати текстові значення: 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;
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, то розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):
Вона виглядає ось так:
?php include ($ _SERVER [ "DOCUMENT_ROOT"]. "/ vstavki / blokvtext2.php"); ?>
Все чудово, але методологічно правильно було б показати приклади сторінок. Обсяг у них маленький, багато місця не займуть, але люди відразу побачать, про що мова.