| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
| 9.0+ | 1.0+ | 10.5+ | 12.0+ | 3.0+ | 1.0+ | 4.0+ | 2.1+ | 1.0+ |
Коротка інформація
| Значення за умовчанням | border-box |
|---|---|
| Наслідується | Ні |
| Застосовується | До всіх елементів |
| Відсоткове відображення | Непридатна |
| Посилання на специфікацію | http://www.w3.org/TR/css3-background/#the-background-clip |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Визначає, як колір фону або фонове зображення повинні відображатися під межами. Ефект помітний при прозорих або пунктирних межах.
Синтаксис
background-clip: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]]
Значення
- padding-box
- Фон відображається всередині меж.
- border-box
- Фон виводиться під межами.
- content-box
- Фон відображається тільки всередині контенту.
Значень може бути кілька (для кожного з множинних фонових малюнків), при цьому значення розділяються між собою комою.
Результат використання значень властивості background-clip для елемента з пунктирною рамкою товщиною 10 пікселів показаний на рис. 1.
Приклад
HTML5CSS2.1CSSIECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-clip</title>
<style>
.example {
background: #5f392f url(images/gear.png); /* Фоновий малюнок */
border: 10px dotted red; /* Параметри рамки */
background-clip: border-box; /* Фон під рамкою */
padding: 10px; /* Відступи */
color: #fff; /* Колір тексту */
min-height: 48px; /* Мінімальна висота */
}
</style>
</head>
<body>
<div class="example">Зміст сторінки</div>
</body>
</html>Браузери
У IE7 фон за умовчанням виводиться як при значенні padding-box.
Safari розуміє тільки нестандартну властивість -webkit-background-clip, також з ним працює Chrome.
Opera до версії 12.0 не підтримує значення content-box.
Firefox до версії 4.0 підтримує нестандартну властивість -moz-background-clip.