Clip background css: background-clip — CSS

Clip background css: background-clip — CSS | MDN

Содержание

Свойства background-origin и background-clip — учебник CSS

Свойства background-origin и background-clip были добавлены в CSS3 как дополнительные инструменты для стилизации фона. На первый взгляд разница между этими свойствами может быть не очень понятна, но в данном уроке мы объясним, чем они отличаются, а также покажем на примерах.

Background-origin: позиционирование фонового рисунка

Если свойство background-position предназначено для указания начальной позиции фонового рисунка по осям, то background-origin управляет его позицией относительно рамки (border), отступа (padding) или содержимого элемента. По умолчанию фоновый рисунок отображается, накладываясь на отступы элемента (если они есть), и не подкладывается под рамку. Это положение можно менять, используя следующие значения background-origin:

padding-box (значение по умолчанию) — фоновое изображение располагается в верхнем левом углу элемента, который является областью отступов padding.
border-box — фоновое изображение располагается в верхнем левом углу элемента, который является областью рамки (при этом рамка накладывается на фон, перекрывая его часть).

content-box — фоновое изображение располагается в верхнем левом углу, который принадлежит содержимому элемента.

Конечно же, настройка background-origin будет иметь смысл только при условии, что у элемента есть рамка и/или отступы. Ниже вы можете посмотреть, как работают разные значения данного свойства. Для примера мы создали блок <div> с большими отступами и толстой фиолетовой рамкой (к тому же пунктирной, чтобы вам было лучше видно поведение фона под ней). Также у блока есть контент, фоновый цвет которого мы для наглядности сделали фиолетовым:

В нашем примере повторение фонового рисунка отключено. Что будет, если включить его? Смотрите пример:

Как видим, фоновый рисунок дублируется, но начальная точка отличается в зависимости от значения background-origin. Если рисунок будет бесшовным, то влияние background-origin может быть практически незаметным:

И еще одна особенность: наверное, вы заметили, что у самого блока <div> есть два фона — сплошной серый цвет и изображение с алфавитом. На примере видно, что свойство background-origin влияет только на позиционирование фонового рисунка, но не цвета фона (который всё равно виден в пробелах пунктирной линии). Как повлиять на цвет фона? В этом нам поможет следующее свойство —

background-clip.

Background-clip: свойство для обрезки фона

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

padding-box — фон заполняет элемент, включая его отступы, и не заполняет область границ, так что в просветах пунктирной или точечной рамки фон не будет виден.
border-box (значение по умолчанию) — фон заполняет элемент, включая область рамки (при этом рамка накладывается поверх фона). В случае с фоновым рисунком эффект данного значения будет заметен только при условии, что он повторяется.

content-box — фон заполняет элемент, включая его содержимое, и не заполняет область отступов и границ.

Примеры для неповторяющегося фонового рисунка:

Примеры для повторяющегося фонового рисунка:

Заметьте, что background-clip не меняет начальную точку позиционирования фона, поэтому верхняя и левая стороны фонового рисунка могут обрезаться, если позиционирование у него осталось по умолчанию (это видно на примере с background-clip:content-box).

Сочетание обоих свойств

Используя background-origin и background-clip в паре, можно исправить проблему обрезки фонового рисунка, о которой мы только что говорили. Например, следующий код заполнит фоном элемент

<div> в области контента, а также задаст соответствующую начальную точку позиционирования фонового рисунка:


div {
	background-clip: content-box;
	background-origin: content-box;
}

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

Internet Explorer поддерживает свойства background-origin и background-clip, начиная с 9-й версии. В большинстве используемых браузеров данные свойства также работают.

Что ж, вот вы и познакомились с еще двумя интересными свойствами, которые помогают стилизовать фон. Но CSS не перестает удивлять: впереди нас ждет еще одно свойство для фоновых изображений, которое, кстати, используется повсеместно — background-size.

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

CSS свойства

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

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

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

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
background-clip	4.0	4.0	10.5	3.0	9.0	12.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

Пример

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

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

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

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

Значение по умолчанию:	border-box
Inherited:	no
Animatable:	no. Читайте о animatable
Version:	CSS3
Синтаксис JavaScript:	object.style.backgroundClip=»content-box»

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

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

Свойство
background-clip	4.0	9.0	4.0	3.0	10.5

Синтаксис CSS

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

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

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

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

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

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

Синтаксис¶

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #example{
      border: 3px solid #666;
      padding: 15px;
      background: #ccc;
      background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства background-clip</h3>
    <p>Здесь использовано значение "content-box".</p>
    <div>
      <p>Фон отображается только внутри контента.</p>
    </div>
  </body>
</html>

Попробуйте сами!

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #example1 {
      border: 5px dashed #666;
      padding: 15px;
      background: #1c87c9;
      background-clip: border-box;  
      }
      #example2 {
      border: 5px dashed #666;
      padding: 15px;
      background: #1c87c9;
      background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства background-clip</h3>
    <p>Здесь установлено значение "border-box" (Значение по умолчанию).</p>
    <div>
      <p>Фон расширяется за пределы границы.</p>
    </div>
    <p>Здесь установлено значение "padding-box".</p>
    <div>
      <p>Фон расширяется в пределах внутреннего края границы.</p>
    </div>
    </div>
  </body>
</html>

Попробуйте сами!

В данном примере фон отображается в пределах текста переднего плана:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #example {
      border: 3px dashed #1ebf42;
      padding: 15px;
      background: #1c87c9;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства background-clip</h3>
    <p>Здесь установлено значение"text"</p>
    <div>
      <p>Фон отображается в пределах текста переднего плана.</p>
    </div>
  </body>
</html>

Попробуйте сами!

Значения¶

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

CSS свойство background-clip | назначение, допустимые значения, примеры

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

Допустимые значения

padding-box — цвет фона ограничивается началом границы элемента
border-box — цвет фона будет продолжаться до внешнего края границы элемента.

Значение по умолчанию	border-box
Применимо	ко всем элементам
Наследование	нет
Версия CSS	CSS 3
Поддерживается браузерами

Пример

.block { background-color: #0f0; background-clip: padding-box; }

Твой код:

<html> <head> <title></title> <style type=»text/css»> <!— .block { background: url(http://www.mpbox.ru/assets/images/logo.jpg) no-repeat #0f0; padding: 30px; background-clip:padding-box; border:10px dashed #000; —> </style> </head> <body> <div> В этом блоке фоновый цвет распространяется только до внутреннего края границы ( работает в Opera 10.5 и выше) </div> </body> </html>Сделай код и жми тут

Результат:

большой полигон

Заметки

Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

Safari 3 и выше и Chrome 1 и выше поддерживают аналогичное свойство -webkit-background-clip, а Firefox 1 и выше соответственно -moz-background-clip. Единственное отличие этих свойств от CSS3 свойства, это то, что возможные значения не padding-box/border-box, a padding/border.

Свойство background-color Свойство background-attachment

CSS — background-clip — Свойство CSS background-clip устанавливает, простирается ли фон элемента под его

background-clip

1-64

Chrome принимает альтернативные синонимы своим значениям: padding , border и content .

1-4

Использовал -moz-background-clip: padding | border синтаксис границы

В IE 7 и IE 8 Internet Explorer это свойство всегда велось как background-clip: padding когда overflow было hidden , auto или scroll .

10.5

15-51

Opera принимает альтернативные синонимы своим значениям: padding , border и content .

Safari принимает альтернативные синонимы своим значениям: padding , border и content .

4.1

≤37-64

WebView принимает альтернативные синонимы своим значениям: padding , border и content .

18-64

Chrome принимает альтернативные синонимы своим значениям: padding , border и content .

14-47

Opera принимает альтернативные синонимы своим значениям: padding , border и content .

Safari принимает альтернативные синонимы своим значениям: padding , border и content .

1.0

1.0-9.0

Chrome принимает альтернативные синонимы своим значениям: padding , border и content .

text

[«Это значение поддерживается только с префиксом версии свойства.», «Согласно блогу WebKit , текстовые украшения или тени не включаются в вырезку».]

До Edge 15 это значение поддерживалось только в префиксной версии свойства.

≤37

3.2

1.0

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

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


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	Фон охватывает только содержимое элемента.

Пример

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

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

CSS фоновый клип

Пример

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

div {
бордюр: 10 пикселей, черный пунктир;
отступ: 15 пикселей;
фон: светло-синий;
фон-клип: прокладка;
}

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

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

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

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

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

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

Объект
фон-клип	4,0	9,0	4,0	3,0	10,5

Синтаксис CSS

фон-клип: граница-поле | поле-заполнение | поле-содержимое | начальный | наследование;

Стоимость недвижимости

Значение	Описание	Играй
бордюр	Значение по умолчанию.Фон выходит за границу	Играй »
прокладка	Фон доходит до внутреннего края границы	Играй »
Контент-бокс	Фон доходит до края поля содержимого	Играй »
начальное	Устанавливает для этого свойства значение по умолчанию. Читать про начальные	Играй »
унаследовать	Наследует это свойство от своего родительского элемента.Читать про наследство

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

Учебник

CSS: фоны CSS

Ссылка на HTML DOM: свойство backgroundClip

Что такое изображение рамки | CSS-уловки

Новое свойство CSS3 border-image немного сложно, но оно позволяет создавать гибкие блоки с настраиваемыми границами (или падающими тенями, если это ваше дело) с одним блоком div и одним изображением. В этой статье я объясню, как свойство сокращенного изображения border-image работает в современных браузерах.

Основная идея

Сокращенное свойство border-image состоит из 3 частей:

  border-image: url (border-image.png) Повторение 25%;

По сути, они позволяют указать:

Изображение для использования в качестве границы
Где разрезать это изображение, разделив изображение на 9 частей
Как браузер должен применить эти секции к краям вашего элемента

Соответствующие детали

Давайте рассмотрим каждую часть процесса более подробно.Первая часть проста и знакома по свойству background-image. В демонстрационных целях я буду использовать это изображение, которое имеет размер 100 x 100 пикселей:

Нарезка изображения

Вторая часть может иметь от одного до четырех значений, как и свойство border-width, и они указываются в том же порядке: вверху, справа, внизу, слева. Вы можете использовать проценты или пиксели. Как ни странно, для процентов требуется «%», а пиксели должны быть указаны как без «px». :

  border-image: url (my-image.gif) 25% 30% 10% 20% повторение;
граница-изображение: url (my-image.gif) 25 30 10 20 повторение;

В этом случае, поскольку мое изображение имеет размер 100 x 100 пикселей, два приведенных выше правила эквивалентны — они разрезают изображение в одних и тех же местах. Я добавил несколько размеров на свое изображение, чтобы продемонстрировать:

Повторение, круглое, растягивающееся

border-image всегда будет помещать угловые части вашего изображения в соответствующие углы поля вашего элемента, но третья часть сокращенного правила сообщает браузеру, как обрабатывать средние части вашего изображения — те, которые пойдут по краям вашего элемента.

Repeat (повторение или мозаика изображения) и stretch (растяжение или масштабирование изображения) говорят сами за себя.

Round означает мозаику изображения, но только так, чтобы уместилось целое количество плиток, и иначе масштабирование изображения. Прямо сейчас Safari и Chrome интерпретируют раунд как повторяют . Может быть до двух значений: одно для верхнего и нижнего краев элемента и одно для левого и правого.

Вот пример с верхним / нижним значением, установленным на , повторение , и левым / правым значением, установленным на stretch :

  # example-one {
  ширина границы: 25 пикселей 30 пикселей 10 пикселей 20 пикселей;
  граница-изображение: url ("граница-изображение.png ") 25 30 10 20 повторить растяжку;
}

Снимок экрана для первого примера

ДЕМО, ЧИТАТЕЛИ RSS НАЖМИТЕ ДЛЯ ПРОСМОТРА. Lorem ipsum dolor sit amet, conctetur adipiscing elit. Aenean eu arcu non dui consquat vestibulum non vitae eros. Donec imperdiet lorem at mi roncus lacinia. Phasellus porttitor ligula eu justo condimentum eget placerat arcu pharetra. Proin fringilla vulputate eros in accumsan. Sed mi nibh, pulvinar eu sollicitudin ut, feugiat non ipsum. In ornare, quam sit amet tempor suscipit, erat odio suscipit nisi, eu gravida nisl orci ut arcu.Lorem ipsum dolor sit amet, conctetur adipiscing elit.

Ширина границы

border-image ничего не сделает, если вы не укажете ширину границы. Для браузеров, которые понимают border-image, ваши фрагменты изображения будут масштабированы до указанной ширины. Если вы используете сокращенное свойство border, оно станет хорошей альтернативой для браузеров, которые этого не делают:

  # example-two {
  граница: двойной оранжевый 50px;
  border-image: url ("border-image.png") 25 30 10 20 повторение;
}

Скриншот второго примера

ДЕМО, ЧИТАТЕЛИ RSS НАЖМИТЕ ДЛЯ ПРОСМОТРА. Lorem ipsum dolor sit amet, conctetur adipiscing elit. Aenean eu arcu non dui consquat vestibulum non vitae eros. Donec imperdiet lorem at mi roncus lacinia. Phasellus porttitor ligula eu justo condimentum eget placerat arcu pharetra. Proin fringilla vulputate eros in accumsan. Sed mi nibh, pulvinar eu sollicitudin ut, feugiat non ipsum. In ornare, quam sit amet tempor suscipit, erat odio suscipit nisi, eu gravida nisl orci ut arcu. Lorem ipsum dolor sit amet, conctetur adipiscing elit.

Или вы можете указать каждую ширину отдельно (в этом примере я указал ширину таким образом, чтобы фрагменты изображения не масштабировались вообще):

  # example-three {
  цвет границы: оранжевый;
  стиль границы: двойной;
  ширина границы: 25 пикселей 30 пикселей 10 пикселей 20 пикселей;
  border-image: url ("border-image.png") 25 30 10 20 повторение;
}

Снимок экрана третьего примера

ДЕМО, ЧИТАТЕЛИ RSS НАЖМИТЕ ДЛЯ ПРОСМОТРА. dolor sit amet, conctetur adipiscing elit.Aenean eu arcu non dui consquat vestibulum non vitae eros. Donec imperdiet lorem at mi roncus lacinia. Phasellus porttitor ligula eu justo condimentum eget placerat arcu pharetra. Proin fringilla vulputate eros in accumsan. Sed mi nibh, pulvinar eu sollicitudin ut, feugiat non ipsum. In ornare, quam sit amet tempor suscipit, erat odio suscipit nisi, eu gravida nisl orci ut arcu. Lorem ipsum dolor sit amet, conctetur adipiscing elit.

Однако использование простой границы той же ширины, что и у вашего изображения границы, не всегда будет идеальным, поэтому вы можете использовать условные таблицы стилей, чтобы дать IE несколько разных стилей границы в целом.

Причуды браузера

Как и ожидалось, IE ничего не понимает в border-image. Браузеры с по поддерживают только сокращенное свойство, а не все отдельные свойства, описанные в спецификации. Некоторые потенциально полезные свойства вообще не поддерживаются, особенно border-image-outset, что решило бы эту проблему.

Кроме того, по умолчанию предполагается, что удаляет центральную часть изображения и использует ключевое слово «fill» в свойстве border-image-slice, чтобы сохранить его:

Ключевое слово fill , если оно присутствует, вызывает сохранение средней части изображения границы.(По умолчанию он отбрасывается, т.е. считается пустым.) (Прочтите спецификацию)

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

Интерактивная демонстрация

Я создал демонстрационную страницу border-image , чтобы помочь мне разобраться в этом новом сложном наборе свойств CSS3.Вы можете выбрать изображение, указать повторение, округление или растяжение, а также настроить ширину границы и срез. Наслаждаться!

Примеры в дикой природе

Крис Спунер использует его для создания приятного эффекта, чтобы придать своим изображениям настраиваемую границу.
В блоге о путешествиях Go Pink Boots (обновление: сейчас в автономном режиме), который я создал недавно, я использовал его, чтобы добавить к изображениям фон из рваной бумаги.
Я использую его на своем сайте Обзор книг веб-дизайнерами (обновление: сейчас в автономном режиме), чтобы выделять цитаты.

Если у вас есть другие примеры на действующих сайтах, я бы с удовольствием их увидел.Оставьте ссылку в комментариях!

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

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

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

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

Синтаксис¶

  background-clip: border-box | обивка | контент-бокс | текст | начальная | наследовать;

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

  

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

Попробуйте сами »

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

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

  

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

Попробуйте сами »

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

Результат¶

Пример свойства background-clip со значением «текст»: ¶

  

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

Попробуйте сами »Ценности

¶

Практикуйте свои знания

Спасибо за отзыв!

Считаете ли вы это полезным? Да Нет

Статьи по теме

Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа посещаемости веб-сайта. Принимаю

Background Clip — Tailwind CSS

Использование

Используйте утилиты bg-clip- {keyword} для управления ограничивающей рамкой фона элемента.

Обрезка до текста

Используйте bg-clip-text , чтобы обрезать фон элемента по форме текста. Полезно для эффектов, когда вы хотите, чтобы фоновое изображение было видно сквозь текст.

  
  
    Привет мир

Отзывчивый

Чтобы управлять ограничивающей рамкой фона элемента в определенной точке останова, добавьте префикс {screen}: к любой существующей утилите выделения фона.Например, добавление класса md: bg-clip-padding к элементу приведет к применению утилиты bg-clip-padding при средних размерах экрана и выше.

Дополнительную информацию о функциях адаптивного дизайна Tailwind можно найти в документации по адаптивному дизайну.

Пользовательская настройка

Варианты

По умолчанию для утилит фонового клипа генерируются только адаптивные варианты.

Вы можете контролировать, какие варианты генерируются для утилит фонового клипа, изменив свойство backgroundClip в разделе вариантов вашего попутного ветра .config.js файл.

Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ backgroundClip: ['hover', 'focus'],
      }
    }
  }

Если вы не планируете использовать утилиты фонового клипа в своем проекте, вы можете полностью отключить их, установив для свойства backgroundClip значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль.export = {
    corePlugins: {
      
+ backgroundClip: false,
    }
  }

CSS | Свойство background-clip — GeeksforGeeks

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

Синтаксис:

 background-clip: border-box | padding-box | content-box | начальный | наследование;

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

border-box: Свойство border-box используется для установки цвета фона, распространяющегося по всему разделу.

Синтаксис:

 background-clip: border-box;

Пример:

html

< html >

900 < заголовок > Граница заголовок >

< стиль >

.gfg {

цвет фона: зеленый;

background-clip: border-box;

выравнивание текста: по центру;

граница: 10 пикселей пунктирная черная;

}

стиль >

головка >

< корпус корпус >

< div класс = "gfg" >

< h3 >

GeeksforGeeks 9005 h3 >

< p >

зажим для фона: рамка-рамка;

p >

div >

корпус >

html >

Вывод:

padding-box: Свойство padding-box используется для установки фона внутри границы.

Синтаксис:

 background-clip: padding-box;

Пример:

html

< html >

<

< title > свойство padding-box title >

< style >

.gfg {

цвет фона: зеленый;

зажим для фона: padding-box;

отступ: 25 пикселей;

граница: 10 пикселей пунктирная черная;

}

стиль >

головка >

< корпус корпус style = "text-align: center" >

< div class = "gfg" >

< h3 >

GeeksforGeeks

h3 >

< p 9006 9 9005 9 9 фон-клип: падди нг-бокс;

p >

div >

корпус >

html >

Вывод:

content-box: Свойство content-box используется для установки цвета фона только для содержимого.

Синтаксис:

 background-clip: content-box;

Пример:

html

< html >

900 < заголовок > свойство содержимого заголовок >

< стиль >

.gfg {

цвет фона: зеленый;

background-clip: content-box;

отступ: 15 пикселей;

граница: 10 пикселей пунктирная черная;

}

стиль >

головка >

< корпус корпус style = "text-align: center" >

< div class = "gfg" >

< h3 >

GeeksforGeeks

h3 >

< p 9006 9 9005 фон-клип: контекст НТ-бокс;

p >

div >

корпус >

html >

Вывод:

начальный: Это значение по умолчанию.Используется для установки цвета фона, распространяющегося по всему разделу.

Синтаксис:

 background-clip: initial-box;

Пример:

html

< html >

<

< название > Начальное название >

< стиль >

.gfg {

цвет фона: зеленый;

фоновый клип: начальный;

отступ: 15 пикселей;

граница: 10 пикселей пунктирная черная;

}

стиль >

головка >

< корпус корпус style = "text-align: center" >

< div class = "gfg" >

< h3 >

GeeksforGeeks

h3 >

< p 9006 9 9005 фоновый клип: initi al;

p >

div >

корпус >

html >

Вывод:

Поддерживаемые браузеры:

Google Chrome 4.0
Internet Explorer 9.0
Firefox 4.0
Opera 10.5
Safari 3.0

Скажите привет Background-Origin и Background-Clip, новые возможности CSS! | Автор: Элад Шехтер

Изучите что-то новое в CSS (Серия)

Привет всем, в этой подсказке мы поговорим о двух новых расширенных свойствах, которые были добавлены в CSS3 к свойству background.

(Этот пост был первоначально опубликован в июне 2013 года и обновлен, потому что он актуален и сегодня)

До появления этого свойства, всякий раз, когда мы добавляли фоновое изображение к элементу, это изображение располагалось слева верхний угол отступа нашего элемента.

Как показано на этом изображении, когда для background-position было установлено значение 0 left, 0 top, вы могли видеть фоновое изображение, начинающееся на краю области заполнения (отмеченной красной точкой).

Живой пример

background-origin позволяет вам решить, где вы хотите установить начальную точку background-position: на границе, отступе или содержимом.

Новое свойство background-origin имеет 3 возможных значения в соответствии с блочной моделью:

border-box - при позиции фона 0,0 изображение будет размещено в верхнем левом углу границы.
padding-box (по умолчанию) - положение фона 0,0 помещает изображение в верхний левый угол поля.
content-box - позиция фона 0,0 поместит изображение в верхний левый угол содержимого.

Живой пример

На верхнем снимке экрана / примере вы можете увидеть влияние значений background-origin.

Как вы можете видеть в последнем примере, background-origin неплох, но кое-чего все еще не хватает. Изображение расположено в соответствии с источником фона, но оно распространяется по правому / нижнему краю границы / отступа.

Фон-клип - это ответ! Используя background-clip, мы можем решить, где вырезать фоновое изображение, точно так же, как мы устанавливаем значения background-origin.

Новое свойство background-clip имеет 3 возможных значения:

border-box (по умолчанию) - показывать полное изображение, ничего не вырезать.
padding-box - обрезать фоновое изображение границы.
content-box - обрезать границу и заполнить фоновое изображение.

Живой пример

Как вы можете видеть в последнем примере, background-origin и background-clip хорошо работают вместе, и большую часть времени вы будете использовать оба с одинаковыми значениями.Например, предположим, что вы используете оба значения со значением «content-box» для размещения фонового изображения над содержимым и обрезки фонового изображения в области отступов и границ.

С этой собственностью вы также можете делать более красивые вещи. Например: я центрировал фоновое изображение и в первой строке сохранил полный размер фона и одновременно играл с background-origin и background-clip. Во второй строке этого примера я растянул размер фонового изображения, чтобы он поместился во весь блок, используя свойство background-size, и снова сыграл со свойствами background-origin и background-clip одновременно.

Живой пример

Результат скриншота для этого примера

Как видите, с помощью этих двух новых функций можно создавать неплохие вещи.

Вот и все для background-origin и background-clip.

Работает во всех браузерах.
IE - работает с IE9 и выше.

Если вам понравился этот пост, вам также может понравиться:
- Новое положение фона в CSS3

Вот и все,

Я Элад Шехтер, веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML, работаю в Investing.com.

Вы можете связаться со мной или подписаться на меня:
Мой Twitter
Facebook
LinkedIn

Вы можете найти меня в моих группах в Facebook:
Мастера CSS
Мастера CSS Израиль

Фоновый клип CSS - Учебное пособие и пример

CSS Background-clip : свойство background-clip описывает область рисования фона . Он ограничивает область, в которой появляется изображение или цвет фона, с помощью любого блока обрезки. Все будет невидимо или выброшено, что находится вне коробки.

Устанавливает, распространяется ли фон элемента под content-box, padding-box и border-box.

Синтаксис:

фон-клип: рамка-рамка | обивка | контент-бокс | наследовать;

background-clip: border-box | обивка | контент-бокс | наследовать;

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

Возможные значения обсуждаются ниже:

бордюр

Используется как значение по умолчанию.Поле границы указывает, что цвет и изображение фона будут созданы в поле границы. Он также устанавливает цвет фона, который распространяется на всю раздачу.

Пример:

<стиль> div { цвет фона: светло-голубой; фон-клип: граница-поле; выравнивание текста: центр; граница: темно-синий пунктир 5px; } h2, h3 { цвет: темно-синий; }

Добро пожаловать на эту страницу

background-clip: border-box;

Добро пожаловать на эту страницу

background-clip: border-box ;

Выход:

набивочная коробка

Используется для обработки фона внутри границы.Цвет и изображение фона задаются внутри рамки.

Пример:

<стиль> div { цвет фона: светло-голубой; фоновый клип: padding-box; отступ: 25 пикселей; выравнивание текста: центр; граница: темно-синий, пунктирный, 5 пикселей; } h2, h3 { цвет: темно-синий; }

Добро пожаловать на эту страницу

background-clip: padding-box;

Добро пожаловать на эту страницу

background-clip: padding-box ;

Выход:

поле содержимого

Значение поля содержимого используется для установки цвета фона только для любого содержимого.В этом случае фоны рисуются внутри поля содержимого. Цвет и изображение фона будут разработаны в поле содержимого.

Пример:

<стиль> div { цвет фона: светло-голубой; фон-клип: контент-поле; отступ: 25 пикселей; выравнивание текста: центр; граница: темно-синий пунктир 5px; } h2, h3 { цвет: темно-синий; }

Добро пожаловать на эту страницу

background-clip: content-box;

Добро пожаловать на эту страницу

background-clip: content-box ;

Выход:

.
No related posts.

alexxlab

Разное

Как часто можно делать клизму грудничку: рекомендации педиатров

Разное

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Разное

Как успокоить плачущего ребенка: 10 эффективных способов

Разное

Что нужно новорожденному на первое время: полный список необходимых вещей

Разное

Пеленки для новорожденных: виды, размеры и способы использования

Разное