Clip background css: background-clip — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

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

CSS свойства

Определение и применение

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

А в чем заключается разница между свойством background-origin и background-clip? Разница заключается в том, что свойство background-clip в отличие от background-originобрезает ту часть фона, которая выходит из указанных рамок. Свойство background-origin лишь определяет, как позиционируется фоновое изображение.

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

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
background-clip4.04.010.53.09.012.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style. backgroundClip = "border-box"

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

ЗначениеОписание
border-boxФон элемента занимает все пространство (включая границы элемента).Это значение по умолчанию.
padding-boxФон элемента занимает все пространство (не включая границы элемента).
content-boxФон элемента занимает все содержимое элемента (если у элемента установлены значения padding (внутренние отступы), то это пространство не будет занято фоном элемента).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Работа с задним фоном в CSS</title>
<style> 
div {
width : 10em; /* устанавливаем ширину блока */
height : 10em; /* устанавливаем высоту блока */
background-color : Plum; /* устанавливает цвет заднего фона */
border : 5px dashed black; /* устанавливает пунктирную границу размером 5px черного цвета */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
padding : 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
}

 . test   {background-clip : border-box;}  /* устанавливаем, что фон элемента занимает все пространство (включая границы элемента) */
.test2 {background-clip : padding-box;}  /* устанавливаем, что фон элемента занимает все пространство (не включая границы элемента) */
.test3 {background-clip : content-box;}  /* устанавливаем, что фон элемента занимает все содержимое элемента */
</style>
</head>
	<body>
		<div class = "test">border-box</div>
		<div class = "test2">padding-box</div>
		<div class = "test3">content-box</div>
	</body>
</html>
Работа с задним фоном в CSS (свойство background-clip).CSS свойства

css властивість background-clip

  • Головна
  • css
  • властивості
  • background-clip

Властивість background-clip визначає, як колір чи картинка тла має виводитися під гранями. Ефект помітний при напівпрозорих (зі значенням transparent) або пунктирних гранях.

Властивість background-clip була введена у CSS3, використовуй її разом з іншими, пов’язаними, властивостями, такими як background-color чи background-image.

Ця властивість може отримувати декілька значень (для кожного з декількох фонових малюнків), при цьому значення поділяються між собою комою.

Без задання застосовується

background-clip: border-box, тло простягається до самого краю кордону елемента. Коли властивість приймає значення padding-box, фон зупиняється, коли закінчується внутрішні відступи (поля) елемента. За допомогою content-box, фон застосовується тільки до вмісту елемента.

Існує подібна властивість — background-origin, от тільки вона не ріже тло, тому якщо тло завелике для елемента, то воно просто пройде під його гранями. Дивись 3 приклад.

Ця властивість також можна використовувати в скороченому записі background (наприклад: background: url("background. png") 40% / 10em lightblue round border-box;).

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

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

Властивість background-clip може отримувати 5 значень:

padding-box

Тло відображається до граней елемента.

border-box

Тло відображається під гранями елемента. Без задання.

content-box

Тло відображається тільки всередині контенту.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

Значення без задання:border-box
Наслідує:Ні
Анімується:Ні
JavaScript синтаксис:object.
style.backgroundClip=»content-box»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
background-clip

4.0

9.0

4.0

3.0

10.5

Переглядач
background-clip

2. 1

4.0

3.2

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3
  • Приклад 4
  • Приклад 5
  • Приклад 6

Динамічний приклад

​Демонстрація роботи властивості
Переглянь як працюють всі три значення властивості background-clip
​Демонстрація роботи властивості
Демонстрація роботи властивості
Синтаксис властивості
.box {


  background-clip: padding-box;


}
Додаткові посилання
background-color
background-position
background-size
background-image
background-blend-mode
background-attachment
background-repeat
background-origin
background
 CSS background-clip 
 ❮ Назад
Полное руководство по CSS
Далее ❯
 
 Пример 
 Укажите, насколько далеко должен простираться фон внутри элемента:
 div
 { 
   граница: 10 пикселей с черными точками; 
    отступ: 15 пикселей; 
   фон:
 светло-синий; 
  фоновый клип:
 обивочная коробка; 
 }
 Попробуйте сами »
 Определение и использование 
 Свойство  background-clip  определяет, насколько далеко фон (цвет или изображение)
должен распространяться внутри элемента.
 Показать демо ❯
 
 Значение по умолчанию: бордюр-бокс
 Унаследовано: нет
 Анимация: нет. Читать о  анимированном 
 Версия: CSS3
 Синтаксис JavaScript:  объект  .style.backgroundClip=»content-box»
Попробуй
 Поддержка браузера 
 Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
 Собственность
 фоновая клипса 4,0 9,0 4,0 3,0 10,5
 Синтаксис CSS 
 background-clip: border-box|padding-box|content-box|initial|inherit;
 Значения свойств 
 Значение Описание Демо
 бордюр Значение по умолчанию. Фон выходит за границу Демонстрация ❯
 набивочный ящик Фон простирается до внутреннего края границы Демонстрация ❯
 коробка с содержимым   Фон простирается до края поля содержимого Демонстрация ❯
 начальный Устанавливает для этого свойства значение по умолчанию. Читать про  начальный 
 унаследовать Наследует это свойство от родительского элемента. Читать о  унаследовать 
 Связанные страницы 
 Учебник CSS: Фоны CSS
 Ссылка на DOM HTML: свойство backgroundClip
 ❮ Предыдущая
Полное руководство по CSS
Далее ❯
 
 ВЫБОР ЦВЕТА 
 Лучшие учебники 
 Учебник HTML 
 Учебник CSS 
 Учебник JavaScript 
 How To Tutorial 
 Учебник SQL 
 Учебник Python 
 Учебник W3. CSS 
 Учебник Bootstrap 
 Учебник PHP 
 Учебник Java 
 Учебник C++ 
 Учебник jQuery 
 900
Справочник по 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 
 FORUM |
3
3
3
3 |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
 Copyright 1999-2023 Refsnes Data. Все права защищены. 
 W3Schools работает на основе W3.CSS.
 15 CSS background-clip Примеры 
 Коллекция бесплатных примеров кода  CSS  background-clip   из Codepen и других ресурсов.
  1.  CSS background-blend-mode Примеры
  2.  Примеры фонового фильтра CSS
 
 О коде 
 Анимация подчеркивания клипа при наведении курсора 
 Причудливое анимированное подчеркивание с использованием обрезки текста. Текст использует фоновый клип : текст  и фон  с линейным градиентом , чтобы быть двухцветным. Мы обходим анимацию градиента, анимируя  background-position вместо . Мы должны использовать элемент-оболочку для выделения подчеркивания под текстом, поскольку цвет текста уже является фоном!
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Ответ: нет
 Зависимости: —
 О коде 
 Эффекты заливки текста при наведении 
 Эффекты заливки текста при наведении с помощью CSS  background-clip  .
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Ответ: да
 Зависимости: —
 О коде 
 Заполнение меню при наведении текста 
  цвет  +  фон-клип  = круто.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Ответ: нет
 Зависимости: —
О коде 
 Текст фонового клипа 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Ответ: да
 Зависимости: —
 О коде 
 CSS-фигуры, столбцы и отсечение 
 Эксперимент со столбцами CSS   , CSS Shapes,  clip-path  и  background-clip  .
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Ответ: да
 Зависимости: —
 О коде 
 Анимация полосатого текста 
 Анимация полосатого текста с помощью  background-clip  и градиентов.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Ответ: нет
 Зависимости: —
 О коде 
 Оверлеи CSS Oceanic 
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Ответ: да
 Зависимости: —
 О коде 
 Визуализация 
 фоновый клип 
 В этом примере показано, как свойство background-clip CSS можно использовать для определения того, как фон элемента применяется в поле элемента.
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Ответ: да
 Зависимости: —
 О коде 
 фоновый клип  Меню
 Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
 Ответ: нет
 Зависимости: —
 О коде 
 Эффект маски 
 Эффект наведения маски.
 Совместимые браузеры: Chrome, Edge, Opera, Safari
 Ответ: да
 Зависимости: —
 О коде 
 Игра с 
 background-clip: текст  и различные  text-fill-color  Values ​​
 Просто играю с  background-clip: text  .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *