Две фоновые картинки у блока
galina2601 11-12-2019, 17:13 1 094 Уроки по CSSЯ обычно занимаюсь сопровождением сайтов. Разработкой сайта или интернет-магазина занимаются совсем другие специалисты, найти их можно на сайте компании https://webformula.pro/services/veb-razrabotka/razrabotka-internet-magazinov/.
А я вношу небольшие изменения в готовые сайты по желанию заказчиков.
Недавно возникла необходимость на одном сайте сделать оригинальный стиль для выделения цитаты.
Цитаты в тексте этого сайта встречаются разные, разного размера по высоте. Но оформить их нужно было в виде листика, оборванного с двух сторон.
Вот, что-то такое, мне предложил заказчик в ТЗ.
Проблем бы не было, если бы все цитаты имели один размер. Нарисовал картинку, сделал фоновой у блока и всё готово.
Здесь же пришлось использовать две разные картинки. Одну для фона справа:
Вторую для фона слева.
В основном все современные браузеры (IE, Cr, Op, Sa, Fx) позволяют добавлять к блоку произвольное число фоновых изображений, все параметры каждого фона просто перечисляются через запятую.
Поэтому в нашем случае достаточно воспользоваться универсальным свойством background. И в описании стилей для блока указать для него вначале один фон, а затем, через запятую, второй.
Пример 1. Два фоновых изображения
<head>
<title>Два фоновых изображения для блока</title>
<style>
body {
background: #e5e5e5; /* Цвет фона страницы сайта*/
}
.block {
background: url(images/left.gif) repeat-y,
#fff url(images/right.gif) repeat-y 100% 0;
padding: 10px 30px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block">
Уж небо осенью дышало,<br>
Уж реже солнышко блистало,<br>
Короче становился день,<br>
Лесов таинственная сень<br>
С печальным шумом обнажалась...<br>
</div>
</body>
</html>
В итоге получилось вот так:
То есть какой бы высоты не была цитата, она отобразится корректно.
Вот на сегодня и всё.