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
Примеры
<!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