Css background clip: background-clip — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

background-clip — Справочник CSS

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад CSS Справочник Далее ❯


Пример

Укажите, как далеко должен простираться фон внутри элемента:

div {
    border: 10px dotted black;
    padding: 15px;
    background: lightblue;
    background-clip: padding-box;
}

Редактор кода »

Определение и использование

Свойство background-clip определяет, как далеко находится фон (цвет или изображение) , как должен распространяться в пределах элемента.

Значение по умолчанию:border-box
Унаследованный:нет
Анимируемый:нет. Прочитать о animatable
Версия:CSS3
JavaScript синтаксис: object.style.backgroundClip=»content-box» Редактор кода

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
background-clip4.09.04.03.010.5

CSS Синтаксис

background-clip: border-box|padding-box|content-box|initial|inherit;

Значение свойств

ЗначениеОписаниеВоспроизвести
border-boxЗначение по умолчанию. Фон простирается за границуВоспроизвести »
padding-boxФон простирается до внутреннего края границыВоспроизвести »
content-boxФон простирается до края окна содержимогоВоспроизвести »
initialЗадает этому свойству значение индекса. Прочитать о initialВоспроизвести »
inheritНаследует это свойство от родительского элемента.
Прочитать о inherit

Связанные страницы

CSS учебник: CSS Backgrounds

HTML DOM справочник: свойство backgroundClip

❮ Назад CSS Справочник Далее ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

background-clip | CSS справочник

Свойства CSS

align-content align-items align-self animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-gap column-rule column-rule-color column-rule-style column-rule-width columns column-span column-width content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight height justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right table-layout text-align text-decoration text-indent text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

Поддержка браузерами

12. 0+ 9.0+ 4.0+ 4.0+ 10.5+ 3.0+

Описание

CSS свойство background-clip определяет область в элементе, для которой задается фон. Эффект будет заметен, если использовать прозрачную или пунктирную границу рамки.

Значение по умолчанию: border-box
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.backgroundClip=»content-box»

Синтаксис

background-clip: border-box|padding-box|content-box|inherit;

Значения свойства

Значение Описание
border-box Фон заполняет все пространство элемента включая рамку.
padding-box Фон заполняет все пространство элемента до рамки.
content-box Фон охватывает только содержимое элемента.

Пример

background-clip:

border-box

padding-box

content-box

Неделю назад, когда я счастливый и довольный приехал на этот прииск, мне казалось, что скоро весь мир узнает обо мне, как об обладателе самого огромного состояния. Я думал, что только неудачники не могут здесь найти золото. Рекламой этого места занимались все известные рекламные агентства, они трубили на весь мир, что счастливчики, которым хватить смелости и денег приобрести билет, будут жить безбедно до конца своих дней. Смелость у меня была, а вот в карманах было пусто, что бы набрать нужную сумму, мне пришлось продать единственную ценную вещь — дедушкины золотые часы.

#myDIV {
padding: 25px;
border: 5px dotted #000000;
background-color: yellow;
background-clip: border-box;
}

Свойство background-clip CSS

❮ Пред.

Следующий ❯

Свойство CSS background-clip определяет, насколько далеко должны располагаться background-color и background-image от элемента. Если у элемента нет background-image или background-color, это свойство будет иметь визуальный эффект только в том случае, если граница имеет прозрачные или частично непрозрачные области, в противном случае граница показывает разницу.

Свойство background-clip является одним из свойств CSS3.

Для обрезки фона по тексту также существует версия свойства background-clip с префиксом поставщика.

 фоновый клип: рамка | обивка | поле содержимого | текст | начальная | наследовать;

Пример свойства background-clip: 

 

  <голова>
    Название документа
    <стиль>
      #пример {
        граница: 3px сплошная #666;
        отступ: 15 пикселей;
        фон: #ccc;
        фоновый клип: поле содержимого;
      }
    
  
  <тело>
     
Пример свойства Background-clip
 
    
 
Здесь используется значение "content-box". 

    <дел>
      
Фон простирается до края блока содержимого.

Попробуй сам »

В следующем примере найдите разницу между значениями «padding-box» и «border-box».

Пример свойства background-clip со значениями «padding-box» и «border-box»: 

 

  <голова>
    Название документа
    <стиль>
      #пример1 {
        граница: 5px пунктир #666;
        отступ: 15 пикселей;
        фон: #1c87c9;
        фоновый клип: рамка;
      }
      #пример2 {
        граница: 5px пунктир #666;
        отступ: 15 пикселей;
        фон: #1c87c9;
        фоновый клип: padding-box;
      }
    
  
  <тело>
     
Пример свойства Background-clip
 
    
Здесь для background-clip установлено значение "border-box" (это значение по умолчанию).

    <дел>
      
Фон выходит за границу.

Здесь для фонового клипа установлено значение "padding-box".

<дел>

Фон простирается до внутреннего края границы.

Попробуй сам »

В этом примере фон закрашивается внутри основного текста.

Результат

Пример свойства background-clip со значением text: 

 

  <голова>
    Название документа
    <стиль>
      #пример {
        граница: 3px пунктир #1ebf42;
        отступ: 15 пикселей;
        фон: #1c87c9;
        фоновый клип: текст;
        -webkit-background-clip: текст;
        цвет: прозрачный;
      }
    
  
  <тело>
     
Пример свойства Background-clip
 
    
Здесь background-clip установлен как "текст"

    <дел>
      
Фон закрашивается внутри текста переднего плана.