background-clip | Справочник CSS
http://belarusweb.net
Основы создания сайтов

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 – под фон отводится только область содержимого элемента, не включая отступы и границы.

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

Ссылки

Примеры

HTML Результат BwCodes
<!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