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

CSS свойства

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
background-clipcss34.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 (свойство background-clip).
CSS свойства