background-clip

Résumé

La propriété CSS background-clip spécifie si la couleur ou l'image d'arrière-plan d'un élément doit s'étendre sous sa bordure.

S'il n'y a pas d'image d'arrière-plan, la propriété n'a d'effet que si la bordure a des zones transparentes (à cause de border-style) ou est partiellement opaque. Sinon, la bordure cache la surface en-dessous.

• Valeur initiale : border-box
• S'applique à : tous les éléments
• Héritée : non
• Média : visuel
• Valeur calculée : comme spécifiée

Syntaxe

background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*

Valeurs

border-box

L'arrière-plan s'étend jusqu'au bord extérieur de la bordure (mais reste en-dessous de la bordure sur l'axe z).

padding-box

L'arrière-plan n'est pas dessiné sous la bordure (l'arrière-plan s'étend jusqu'au bord extérieur du padding).

content-box

L'arrière-plan est dessiné dans (contenu dans) la boîte de contenu.

Exemples

 pre {
   border: 5px navy;
   border-style: dotted double;
   background: #F8D575;
   /* L'arrière-plan jaune n'ira pas dessous la bordure */
   background-clip: padding-box;
 }

Spécifications

Compatibilité des navigateurs

[1] Gecko supporte, depuis la version 1.1 jusqu'à la version 1.9.2, ce qui correspond de Firefox 1.0 à 3.6 inclus, la syntaxe préfixée : -moz-background-clip: padding | border.

[2] Internet Explorer 7, mais pas les autres version de Internet Explorer, se comporte comme background-clip:padding si overflow: hidden | auto | scroll.

[3] Webkit supporte aussi une version préfixée de cette propriété, et dans ce cas, en supplément des autres mots-clés, les synonymes suivants : padding, border, et content.

[4] Konqueror 3.5.4 supporte -khtml-background-clip.

Voir également

• Background-related CSS properties: background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size
• clip