Товаров: 0 (0р.)

Background clip css: background-clip — CSS | MDN

Содержание

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-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 свойство 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»;

Синтаксис¶

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

Пример¶

<!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Значение элемента наследуется от родительского элемента.

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

15. 0+ 12.0+ 4.0+
3.6 -moz-		 7.0+ 11.5+
10.1 -o-

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 свойство background-clip | Как создать сайт

CSS справочник

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

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

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

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

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 справочник

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Поделиться

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

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

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

Синтаксис: 

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

Стоимость объекта:

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

Синтаксис: 

 фон-клип: рамка-рамка;

Пример:



HTML

< html >

< Головка >

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

< стиль >

.gfg {

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

фон-клип: рамка-рамка;

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

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

}

стиль >

Головка >

< корпус >

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

< h3 >

GeeksforGeeks

h3 >

< p >

фон-клип: рамка-рамка;

p >

div >

корпус >

html >

Выход:

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

Синтаксис: 

 background-clip: padding-box;

Пример:

HTML

< html >

< Головка >

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

< стиль >

.gfg {

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

фон-клипса: padding-box;

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

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

}

стиль >

Головка >

< body style = "text-align: center" >

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

< h3 >

GeeksforGeeks

h3 >

< p >

фон-клипса: padding-box;

p >

div >

корпус >

html >

Выход:

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

Синтаксис: 

 фоновый клип: поле содержимого;

Пример:



HTML

< html >

< Головка >

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

< стиль >

.gfg {

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

background-clip: content-box;

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

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

}

стиль >

Головка >

< body style = "text-align: center" >

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

< h3 >

GeeksforGeeks

h3 >

< p >

background-clip: content-box;

p >

div >

корпус >

html >

Выход:

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

Синтаксис: 

 фон-клип: начальный-бокс;

Пример:

HTML

< html >

< Головка >

< заголовок > Начальный заголовок >

< стиль >

.gfg {

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

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

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

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

}

стиль >

Головка >

< body style = "text-align: center" >

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

< h3 >

GeeksforGeeks

h3 >

< p >

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

p >

div >

корпус >

html >

Выход:

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

  • Google Chrome 4. 0
  • Internet Explorer 9.0
  • Firefox 4.0
  • Опера 10,5
  • Safari 3.0

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,
    }
  }

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

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

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

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

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

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

Живой пример

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

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

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

Живой пример

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

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

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

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

  1. border-box (по умолчанию) - показывать полное изображение, ничего не вырезать.
  2. padding-box - обрезать фоновое изображение границы.
  3. 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 background-clip text | Майкл Гирон

«background-clip: text» поддерживается во всех основных браузерах с префиксом Webkit, он позволяет обрезать фоновое изображение текстовым элементом. В этом руководстве мы рассмотрим примеры использования свойства background-clip и различных значений, которые вы можете использовать. Свойство background-clip было введено в Webkit в 2008 году.

Значения для фонового клипа

Помимо значения текста для свойства background clip мы также можем использовать следующие значения:

  • border-box - значение по умолчанию. Это позволяет фону простираться до внешнего края границы элемента.
  • padding-box закрепляет фон по внешнему краю заполнения элемента и не позволяет ему выходить на границу.
  • content-boxclips фон на краю поля содержимого.
  • начальный устанавливает для этого свойства значение по умолчанию.
  • наследовать применяет настройку фонового клипа родительского элемента к выбранному элементу.

Код для клипа

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

  фон: () без повтора;
 -webkit-background-clip: текст;
 фон-клип: текст;
 цвет: прозрачный;

Демонстрация фонового ролика: текст

В демонстрации ниже изображение обрезается по тексту с помощью CSS-свойства background-clip

.

См. Маскировку изображений CSS Pen от Майкла Гирона (@michaelgearon) на CodePen.

В приведенной выше демонстрации GIF-изображение вырезано из текста. См. Маскировку Pen GIF от Майкла Гирона (@michaelgearon) на CodePen.

Связанные руководства CSS

Автор

Майкл Гирон

Майкл Гирон - старший дизайнер взаимодействия в Companies House в Кардиффе. Ранее Майк был дизайнером продуктов в GoCo Group, включая GoCompare, MyVoucherCodes и WeFlip. Также хорошо работает для таких брендов в Южном Уэльсе, как BrandContent и HEOR.

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;
        фон-клип: обивка-поле;
      }
    
  
  
     
 Пример свойства Background-clip 
 
    
 Здесь для background-clip установлено значение "border-box" (это значение по умолчанию).

    

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

    

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

    

      
 Фон доходит до внутреннего края границы.
Попробуйте сами »

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

Результат¶

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

  

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

    

      
 Фон окрашивается в текст переднего плана.
Попробуйте сами »Значения

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


Свойство CSS3 background-clip - Tutorial Republic

Тема: Справочник по свойствам CSS3 Пред. | След.

Описание

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

В следующей таблице приведены контекст использования и история версий этого свойства.

Синтаксис

Синтаксис свойства задается следующим образом:

 фоновый клип:
бордюрный бокс | обивка | контент-бокс | начальная | унаследовать

Пример ниже показывает свойство background-clip в действии.

 .коробка {
    ширина: 250 пикселей;
    высота: 150 пикселей;
    отступ: 10 пикселей;
    граница: 6px пунктирная # 333;
    фон: оранжевый;
    фон-клип: контент-бокс;
}

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

В следующей таблице описаны значения этого свойства.

Значение Описание
бордюр Указывает, что фон распространяется до внешнего края границы.Фон рисуется ниже границы. Это значение по умолчанию.
прокладка Указывает, что фон простирается до внешнего края заполнения. Фон ниже границы не отображается.
поле содержимого Указывает, что фон закрашивается (обрезается) только внутри поля содержимого. Фон ниже границы и области заполнения не отображается.
начальный Устанавливает для этого свойства значение по умолчанию.
наследовать Если указано, связанный элемент принимает вычисленное значение свойства своего родительского элемента background-clip .

Совместимость с браузером

Свойство background-clip поддерживается во всех основных современных браузерах.

Базовая поддержка -

  • Firefox 4+
  • Google Chrome 4+
  • Internet Explorer 9+
  • Apple Safari 3+
  • Опера 10.5+

Дополнительная литература

См. Учебник по: Фон CSS3, Фон CSS3.

Связанные свойства: background , background-attachment , background-color , background-image , background-origin , background-position , background-repeat , background-size .

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


.

No related posts.

alexxlab

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

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

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

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

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

Детская кроватка для новорожденного: как правильно выбрать

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

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