| 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.
 |  |  |
| padding-box | border-box | content-box |
Рис. 1. Результат застосування різних значень
Приклад
HTML5 CSS2.1 CSS IE Cr Op Sa Fx
<!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 .