САЙТЫ  ПОД  КЛЮЧ
ОНЛАЙН-СЕРВИСЫ СПРАВОЧНИКИ SEO-ИНСТРУМЕНТЫ РАЗВЛЕЧЕНИЯ

Справочник по CSS

-webkit-background-clip

Internet Explorer Chrome Opera Safari Firefox Android iOS
2.0+ 3.1+

Краткая информация

Значение по умолчанию border
Наследуется Нет
Применяется Ко всем элементам
Процентная запись Неприменима

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

Синтаксис

-webkit-background-clip: [padding|border|content|text] [, [padding|border|content|text]]

Значения

padding
Фон отображается внутри границ.
padding-box
Аналогично padding.
border
Фон выводится под границами.
border-box
Аналогично border.
content
Фон отображается только внутри контента.
content-box
Аналогично content.
text
Фон выводится под текстом.

Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.

Результат использования разных значений для элемента с пунктирной рамкой толщиной 10 пикселов показан на рис. 1.

Рис. 1а Рис. 1а Рис. 1а
padding-box border-box content-box

Рис. 1. Результат применения разных значений

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>-webkit-background-clip</title>
  <style>
   body { background: #333;}
   h1 {
    background: url(images/chrome-bg.png) 0 50% repeat-x; /* Фоновый рисунок */
    -webkit-background-clip: text; /* Фон под буквами */
    color: transparent; /* Прозрачный цвет */
    font: bold 26pt Arial; /* Параметры фона */
   }
  </style>
 </head>
 <body>
  <h1>Лучше жевать, чем курить</h1>
 </body>
</html>

Результат данного примера в браузере Chrome показан на рис. 2.

Фоновый рисунок под текстом

Рис. 2. Фоновый рисунок под текстом

Браузеры

Chrome с версии 7.0 и Safari с 5.0 поддерживают стандартное свойство background-clip.

Справочник по CSS. Версия 7.0 от 5.11.12

© 2002–2012 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

htmlbook.ru


Дежурная шутка

Я уже много лет пользуюсь интернетом каждый день. Я привык к идиотам, разучился писать без спеллчекера и даже перестал ржать над заголовками новостей. Я до сих пор не могу понять лишь одного: почему американский Гугл определяет местонахождение моего домашнего компьютера с точностью до района города, а все наши сайты во главе с Яндексом и моим интернет-провайдером железно уверены, что я в Москве.


Наши реквизиты
WMID: 309688839848
WMR: R325885159214
E-mail: 
  BL:Бизнес-уровень [BL]
QR-код сайта
Онлайн-радио
Больше радиостанций