Page 124 - Сила CSS3 Освой новейший стандарт
P. 124
124 • Глава 3. Линованная бумага
background: url(images/paperlines.gif) #FBFBF9;
background: url(images/thumbtack.png) 50% 5px no-repeat,
url(images/stains1.png) 90% -20px no-repeat,
url(images/stains2.png) 30% 8% no-repeat,
url(images/stains3.png) 20% 50% no-repeat,
url(images/stains4.png) 40% 60% no-repeat,
url(images/paperlines.gif) #FBFBF9;
-moz-background-size: auto, auto, auto, auto, auto,
auto 1.6em;
-webkit-background-size: auto, auto, auto, auto, auto,
auto 1.6em;
background-size: auto, auto, auto, auto, auto,
auto 1.6em;
}
Мы передали ненулевую координату разреза только для левого фрагмента изо-
бражения; сверху, справа и снизу оно обрезаться не будет. Однако слева отрезается
полоса шириной 50 пикселов, что равно ширине самого изображения — именно
это нам и требуется, так как все изображение целиком должно закрывать собой
левый отрезок рамки.
Рис. 3.19. Копии изображения кромки листа, вырванного из блокнота, последовательно
выводятся вдоль левого края страницы поверх фонового изображения
Кроме того, мы добавили ключевое слово round для того, чтобы изображение по-
вторялось несколько раз вдоль левого края страницы, но не обрезалось где-нибудь
посередине отверстия. Поскольку Safari и Chrome не поддерживают это значение,
www.trk.kg