background-clip vous permet de contrôler dans quelle mesure une image ou une couleur d'arrière-plan s'étend au-delà du remplissage ou du contenu d'un élément.
.frame ( background-clip: padding-box; )Valeurs
border-boxest la valeur par défaut. Cela permet à l'arrière-plan de s'étendre jusqu'au bord extérieur de la bordure de l'élément.padding-boxcoupe l'arrière-plan sur le bord extérieur du remplissage de l'élément et ne le laisse pas s'étendre dans la bordure.content-boxcoupe l'arrière-plan au bord de la zone de contenu.inheritapplique lebackground-clipparamètre du parent à l'élément sélectionné.
Démos
background-clip est mieux expliqué en action, nous avons donc rassemblé deux démos pour montrer comment cela fonctionne.
Dans la première démo, chaque div contient un paragraphe. Le paragraphe est le contenu de la div. Chaque div a un fond jaune et une bordure bleu clair semi-transparente de 5 pixels.
Voir le clip d'arrière-plan Pen par CSS-Tricks (@ css-tricks) sur CodePen.
Par défaut, ou avec background-clip: border-boxset, l'arrière-plan jaune s'étend jusqu'au bord extérieur de la bordure. Remarquez à quoi ressemble la bordure verte à cause du fond jaune en dessous.
Lorsque le background-clipdevient padding-box, la couleur d'arrière-plan s'arrête là où le remplissage de l'élément se termine. Notez que la bordure est bleue car l'arrière-plan n'est pas autorisé à fondre dans la bordure.
Avec background-clip: content-box, la couleur d'arrière-plan s'applique uniquement au contenu du div, dans ce cas l'élément de paragraphe unique. Le remplissage et la bordure du div n'ont pas de couleur d'arrière-plan. Mais, il y a un petit détail qui mérite d'être mentionné: la couleur s'étend dans la marge du contenu. Découvrez les différences entre les premier et deuxième exemples avec content-box.
Dans le premier content-boxexemple, les marges par défaut du navigateur sont appliquées au paragraphe et l'arrière-plan est coupé après la marge. Dans le deuxième exemple, la marge est définie sur 0 dans le CSS et l'arrière-plan est découpé au bord du texte.
Ce prochain spectacle interactif background-clipavec une image de fond. Le contenu de cette démo est un div vide plus petit.
Voir l'exemple interactif de clip d'arrière-plan Pen de Timothy Miller (@tjacobdesign) sur CodePen.
Cette démo s'applique également background-size: coveret background-repeat: no-repeaten plus de background-clipcontrôler l'image d'arrière-plan, qui se répéterait autrement jusqu'à l'écrêtage.
Texte
Il existe une version préfixée par le fournisseur qui fonctionne pour découper un arrière-plan en texte. Afin de voir ce travail, le texte devra également être transparent. Heureusement, il existe une autre propriété de couleur de texte préfixée par le fournisseur qui peut efficacement remplacer color, ce qui la rend sûre à utiliser car elle peut avoir un repli:
.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )Firefox, Chrome et Safari le prennent en charge.
Voir le
texte Pen Lit de Chris Coyier (@chriscoyier)
sur CodePen.
En rapport
- background-attachment
- Couleur de l'arrière plan
- image de fond
- background-origin
- position de fond
- Répétition du fond
- taille de fond
Plus de ressources
background-clipdans la spécification CSS3- background-clip chez MDN
- Le modèle CSS Box
Prise en charge du navigateur
Tout est clair!
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 3+ | 4+ | 10,5+ | 9+ | 4.1+ | Travaux |