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
   120   121   122   123   124   125   126   127   128   129   130