Background-clip и background-origin — это новые свойства модуля фона, добавленные в CSS3 и используемые для определения положения фона.
Background-clip используется для определения того, содержит ли фон область границы. Фоновое происхождение используется для определения опорной позиции для расчета фоновой позиции.
Синтаксис:
фоновый клип: [граница | заполнение] [, [граница | заполнение]]* |
Для фонового клипа:
Если это значение заполнения, фон игнорирует края заполнения, а граница становится прозрачной. Если это значение границы, фон включает область границы. Если имеется несколько изображений фонового изображения, соответствующие значения фонового клипа разделяются запятыми.
Для фонового происхождения:
Если это значение заполнения, позиция определяется относительно края заполнения («0 0» — верхний левый угол края заполнения, а «100% 100%» — нижний правый угол). Если это значение границы, это означает относительный край границы. Значение границы относится к краю содержимого. Как и в фоновом клипе, несколько значений разделяются запятыми. Если фоновый клип — это значение заполнения, фоновое происхождение — это значение границы, а фоновая позиция — «вверху слева» (начальное значение по умолчанию), верхний левый угол фонового изображения будет обрезан.
Эти два атрибута появляются только в CSS3. А как насчет поведения по умолчанию в фоновом модуле, когда этот атрибут не используется?
| По умолчанию фоновый клип имеет значение вроде фонового клипа: граница. По умолчанию фоновое происхождение имеет значение вроде фонового происхождения: отступ. |
Но IE — особый случай (это отстой).
В IE6 и IE7 фон общих элементов (кроме кнопок и т. д.) эквивалентен: фон-клип: граница; фон-происхождение: граница;
Фон элементов hasLayout (плюс кнопки и т. д.) эквивалентен: background-clip:padding background-origin:padding;
Эта пара свойств CSS3 реализована в таких браузерах, как Mozilla, Safari 3 и Konqueror, но все они выражаются через свои частные свойства.
Частные атрибуты базовых браузеров, отличных от IE, обычно начинаются с -xxx-, -o- является частным для Opera с Presto в качестве движка, -icab- является частным для iCab, а -khtml- является браузером с KHTML в качестве движка. (например, Konqueror Safari), -moz- — это браузер, основанный на движке Mozilla Gecko (например, Firefox, Mozilla), -webkit- — это браузер (например, Safari, Swift), основанный на движке рендеринга Webkit (производное от KHTML). ) .
То есть поддерживаемые частные атрибуты:
| -moz-фоновый клип -webkit-background-clip -khtml-фоновый клип -moz-background-origin -webkit-background-origin -khtml-фон-происхождение |
Вот простой пример использования атрибута background-origin. Эффект следующий:
HTML-код:
CSS-код:
кнопка { border:3px double #95071b;/*Используйте двойную рамку размером 3px, чтобы имитировать белую линию в дизайне*/ цвет фона: #95071b; /*Установим метод обрезки фона и направляющие линии*/ -moz-background-origin:padding; /*Прямая совместимость*/ цвет: #fff; /*Исправление проблемы с высотой в IE6*/ |
Недостатки: Данного эффекта невозможно добиться в Opera. Конечно, это всего лишь решение для тех, кто одержим HTML-кодом (ограниченным изучением и пониманием атрибутов фонового клипа и фонового происхождения). Конечно, вы также можете попробовать другие методы, которые могут сделать CSS более кратким. Что касается преимуществ различных методов, то недостатки решать вам.