Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Vos résultats de recherche

    background-clip

    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 ni couleur 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 .

    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é
    Animablenon
    Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

    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é à la boîte de contenu.
    text
    L'arrière-plan est limité au texte en premier plan. Cette valeur est uniquement utilisable avec la propriété préfixée en -webkit-.

    Syntaxe formelle

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

    Exemples

    Note : Des exemples d'utilisation de -webkit-background-clip: text se trouvent dans la section Apprendre le Web de MDN.

    CSS

    p {
 border: 5px navy;
 border-style: dotted double;
 margin: 1em;
 padding: 2em;
 background: #F8D575;
}

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

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

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

    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>

    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.

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support simple 1.0[1] 4.0 (2.0)[3] 9.0[5] 10.5 3.0 (522)[1]
    content-box 1.0[1] 4.0 (2.0)[3] 9.0[5] (Oui) 3.0 (522)[1]
    text (Oui)-webkit[2] 49.0 (49.0)[4] Pas de support (Oui)-webkit[2] (Oui)-webkit[2]
    Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 4.1 14.0 (14) 7.1 12.1 (Oui)
    content-box 4.1 14.0 (14) 7.1 12.1 (Oui)
    text ? 49.0 (49.0)[4] Pas de support ? ?

    [1] Webkit supporte également une version préfixée de la propriété qui gère les synonymes suivants padding, border et content en plus des mots-clés définis ici.

    [2] Selon ce billet (en anglais), WebKit n'inclut pas les décorations de texte ou les ombres dans la découpe.

    [3] Gecko utilisait une différente syntaxe entre les versions 1.1 à 1.9.2 (Firefox 1.0 à 3.6) avec un préfixe : -moz-background-clip: padding | border.

    [4] Gecko prend désormais en charge la version préfixée avec -webkit pour assurer une compatibilité avec les autres navigateurs. Il prend également en charge la valeur text avec la version non-préfixée background-clip via la préférence layout.css.background-clip-text.enabled qui n'est pas activée par défaut dans Firefox 48. Selon ce billet (en anglais), Gecko n'inclut pas les décorations de texte ou les ombres dans la découpe

    [5] Pris en charge par Internet Explorer 7 mais pour les anciennes versions, cela se comportait comme background-clip:padding si overflow: hidden | auto | scroll.

    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,