background-clip

Aller à :
  1. Syntaxe
  2. Exemples
  3. Spécifications
  4. Compatibilité des navigateurs
  5. Voir aussi

La propriété background-clip définit la façon dont l'arrière-plan d'un élément (que ce soit l'image ou la couleur) s'étend sous la bordure.

Si aucune image (background-image) ni couleur (background-color) d'arrière-plan n'est définie, cette propriété aura uniquement un effet visuel lorsque la bordure possède des régions transparentes (via border-style ou border-image). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .

Syntaxe

/* Valeurs utilisant un mot-clé */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Valeurs globales */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

Valeurs

border-box
L'arrière-plan s'étend jusqu'à la limite externe de la bordure. L'arrière-plan sera situé sous la bordure en termes d'ordre z.
padding-box
Aucun arrière-plan n'est dessiné dans la boîte de bordure. L'arrière-plan s'étend jusqu'à la limite de la boîte de remplissage (padding).
content-box
L'arrière-plan est limité (rogné) à la boîte de contenu.
text
L'arrière-plan est limité (rogné) au texte en premier plan.

Syntaxe formelle

<box>#
où 
<box> = border-box | padding-box | content-box

Exemples

CSS

p {
 border: 10px navy;
 border-style: dotted double;
 margin: 1em;
 padding: 2em;
 background: #F8D575;
 font: 900 1.2em sans-serif;
 text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}

.padding-box {
  background-clip: padding-box;
}

.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  color: rgba(0,0,0,.2);
}

HTML

<p class="border-box">
  L'arrière-plan s'étend sous la bordure.
</p>
<p class="padding-box">
  L'arrière-plan s'étend jusqu'avant la 
  bordure.
</p>
<p class="content-box">
  L'arrière-plan s'arrête à la boîte de
  contenu.
</p>
<p class="text">
  L'arrière-plan se limite au texte au
  premier-plan.
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'background-clip' dans cette spécification.		 Candidat au statut de recommandation Définition initiale.
CSS Backgrounds and Borders Module Level 4
La définition de 'background-clip' dans cette spécification.		 Brouillon de l'éditeur Ajout de la valeur text.

Valeur initialeborder-box
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1112429310.531
content-box112429410.53
text Oui -webkit- 5

12 -webkit- 5

15

496 Non Oui -webkit- 5 Oui -webkit- 5
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple4.1 Oui Oui1412.1 Oui Oui
content-box4.1 Oui Oui1412.1 Oui Oui
text ? ? Oui496 Oui -webkit- 5 Oui -webkit- 5 ?

1. Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.

2. Firefox supported, from version 1 to 3.6 included, a different and prefixed syntax: -moz-background-clip: padding | border.

3. In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden, auto, or scroll.

4. In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll

5. Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.

6. In Firefox 48, it was not activated by default and its support could be activated by setting layout.css.background-clip-text.enabled pref to true.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, teoli, FredB, Mgjbot, Kyodev, Fredchat
Dernière mise à jour par : SphinxKnight,