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

css-свойство background-clip (от англ. background clip – обрезка фона) используется для того, чтобы указать браузеру, какую область элемента следует использовать для фона (остальное обрезается).

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

Характеристики

Значение по умолчанию: border-box.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.backgroundClip="value".

Синтаксис

background-clip: [padding-box | border-box | content-box | text]#

Значения

border-box – под фон отводится вся площадь элемента, включая внутренние отступы и границы; эффект от применения этого значения будет заметен, если границы будут прозрачными или, например, пунктирными.
padding-box – под фон отводится вся площадь элемента до самых границ, но не включая их.
content-box – под фон отводится только область содержимого элемента, не включая отступы и границы.

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

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background-clip

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-clip

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		p{
		padding: 3em;
		margin-top: 4em;
		width: 300px;
		height: 100px;
		border: dashed 20px green;
		background-size: cover;
		background-image: url("images/balls_2015.jpg");
		}
		
		.background_1{
		background-origin: border-box;
		background-clip: border-box;
		}
		
		.background_2{
		background-clip: padding-box;
		background-origin: padding-box;
		}
		
		.background_3{
		background-clip: content-box;
		background-origin: content-box;
		}
	</style>
	
</head>
<body>
	<p class="background_1">
		background-clip: border-box<br>
		background-origin: border-box		
	</p>
	
	<p class="background_2">
		background-clip: padding-box<br>
		background-origin: padding-box		
	</p>
	
	<p class="background_3">
		background-clip: content-box<br>
		background-origin: content-box		
	</p>		
</body>
</html>

Пример №1