Пять изображений на одном элементе
Главная хитрость состоит в использовании сгенерированного контента (':before' и ':after') для того, чтобы поместить четыре дополнительных изображения на один элемент. У псевдоэлементов ':before' и ':after' могут быть фоновое изображение и изображение переднего плана, плюс фоновое изображение у самого элемента — в сумме это даёт нам пять изображений.
Мы создаем пять изображений в формате PNG images и размещаем их в четырех углах и напротив правого края элемента. Вот изображения:
- верхний левый угол:
- верхний край и верхний правый угол:
- средняя часть и правый край:
- нижний левый угол:
- нижний край и нижний правый угол:
А вот правила CSS для их расположения:
blockquote {
max-width: 620px;
background: url(rs-right.png) right repeat-y }
blockquote:before {
display: block;
line-height: 0;
background: url(rs-topright.png) top right no-repeat;
content: url(rs-topleft.png) }
blockquote:after {
display: block;
line-height: 0;
background: url(rs-bottomright.png) bottom right no-repeat;
content: url(rs-bottomleft.png) }
Так как наше фоновое изображение шириною в 620px, мы не можем позволить блоки шире 620px без интервалов. Поэтому тут есть свойство 'max-width'. Свойство 'display: block' необходимо для того, чтобы убедиться, что сгенерированный контент формирует собственные блоки сверху и снизу основного контента, вместо того, что помещаться на первой и последней строчке. Свойство 'line-height: 0' гарантирует, что сверху и снизу изображений не останется свободного места для надстрочных и подстрочных символов в свойстве 'content'.
