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 .