Page 125 - Сила CSS3 Освой новейший стандарт
P. 125
Усложнение фона • 125
они обрабатывают изображение так, как диктует значение по умолчанию (repeat), —
это допустимый компромисс.
Размещение изображений с помощью background-clip
Теперь вдоль левого края блока div аккуратно выводятся копии нашего изображения
кромки вырванной из блокнота страницы. Однако осталась проблема — фоновое
изображение видно сквозь «дыры» на бумаге (рис. 3.19). Так происходит потому,
что рамка по умолчанию отображается поверх фоновой области. Возможно, раньше
вы этого не замечали, так как чаще всего в качестве рамки используются одно-
цветные линии без прозрачных участков. Попробуйте ради эксперимента добавить
к свойству border-style ключевое слово dashed, и вы поймете, что я имею в виду.
Изображения на рамки накладываются по такому же принципу.
порядок Следования СвойСтв, опиСывающих Фон элемента
Чаще всего порядок записи свойств в правиле не играет роли; я просто перечисляю свойства
в привычном для меня порядке, но вы можете выбрать другой вариант компоновки со-
держимого правила. Тем не менее свойство background-clip необходимо всегда записывать
после составного свойства background, как показано, потому что, по идее, background-clip
можно добавлять внутрь составного свойства background (см. рис. 3.10). Если сначала за-
писать в коде отдельное свойство background-clip, а затем добавить свойство background,
не включающее background-clip, браузер поймет это как приказ использовать значение по
умолчанию (border-box) и переопределить первоначальные параметры background-clip.
Почему бы просто не добавить нужное значение background-clip в составное свойство
background? Это невозможно. Есть причины, запрещающие нам пока что включать значения
background-clip в свойство background: некоторые браузеры требуют наличия префиксов
и пока что не могут справиться с ситуацией, когда стандартное свойство без префиксов
добавляется в составное свойство background.
коротко о СвойСтве baCkGround-ClIp
Свойство background-clip входит в модуль Backgrounds and Borders (Фон и границы), описа-
ние которого вы найдете по адресу http://www.w3.org/TR/css3-background. Оно позволяет
указать секции элемента, под которыми должен отображаться фон.
Допустимые значения свойства: border-box (значение по умолчанию, фон отображается
под рамками), padding-box (фон обрезается по внешним краям полей внутренней об-
ласти, т. е. по внутренним краям рамок) и content-box (фон обрезается по краю области
содержимого и не отображается под полями и рамками). Firefox 3.6 и более ранние версии
не поддерживают content-box и используют значения border и padding, а не border-box
и padding-box; в Firefox 4 этот недостаток уже устранен. Safari 5 поддерживает значения
border-box и padding-box в стандартном свойстве background-clip, но в свойстве -webkit-
background-clip позволяет использовать только content-box.
www.trk.kg