Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » Две фоновые картинки у блока

Две фоновые картинки у блока

galina2601 11-12-2019, 17:13 910 Уроки по CSS

Я обычно занимаюсь сопровождением сайтов. Разработкой сайта или интернет-магазина занимаются совсем другие специалисты, найти их можно на сайте компании https://webformula.pro/services/veb-razrabotka/razrabotka-internet-magazinov/.

А я вношу небольшие изменения в готовые сайты по желанию заказчиков.

Недавно возникла необходимость на одном сайте сделать оригинальный стиль для выделения цитаты.

Цитаты в тексте этого сайта встречаются разные, разного размера по высоте. Но оформить их нужно было в виде листика, оборванного с двух сторон.

Вот, что-то такое, мне предложил заказчик в ТЗ.

Проблем бы не было, если бы все цитаты имели один размер. Нарисовал картинку, сделал фоновой у блока и всё готово.

Здесь же пришлось использовать две разные картинки. Одну для фона справа:

Вторую для фона слева.

В основном все современные браузеры (IE, Cr, Op, Sa, Fx) позволяют добавлять к блоку произвольное число фоновых изображений, все параметры каждого фона просто перечисляются через запятую.

Поэтому в нашем случае достаточно воспользоваться универсальным свойством background. И в описании стилей для блока указать для него вначале один фон, а затем, через запятую, второй.


Пример 1. Два фоновых изображения

<html>
<head>
<title>Два фоновых изображения для блока</title>
<style>
body {
background: #e5e5e5; /* Цвет фона страницы сайта*/
}
.block {
width:250px;
color:red;
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>


В итоге получилось вот так:

То есть какой бы высоты не была цитата, она отобразится корректно.

Вот на сегодня и всё.


Похожие новости

  • Как разместить полупрозрачный блок поверх слайдера?
  • Оформление блока div рамкой с закругленными углами и тенью
  • Как сделать блок div гиперссылкой
  • Как подключить стили к HTML-документу. Урок 1
  • Урок 5. Вставка графики и мультимедиа

  • Добавить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив