П'ять зображень на одному елементі
Головний трюк - використовування сгенерованого контенту '::before' та '::after') для розміщення чотирьох додаткових зображень в один елемент. '::before' псевдоелемент може мати фоновий та передній шар, '::after' псевдоелемент - також, а елемент сам може мати фоновий шар в цілому для п'яти зображень.
Ми створюємо п'ять PNG зображень та розміщуємо їх в чотирьох кутах та навпроти правого краю елемента. Ось зображення:
- верхній лівий кут:
- верхній край та верхній правий кут:
- середня частина правий край:
- ніжній лівий кут:
- ніжній край та ніжній правий кут:
Ось правила 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'.
