1. Web
  2. CSS
  3. Référence CSS
  4. Propriétés CSS
  5. background-clip

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

background-clip

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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 boîte de bordure, la boîte de remplissage (padding) ou la boîte de contenu.

Exemple interactif

background-clip: border-box; 
background-clip: padding-box; 
background-clip: content-box; 
background-clip: text; color: transparent; 
<section id="default-example"> <div id="example-element">This is the content of the element.</div> </section> 
#example-element { background-image: url("/shared-assets/images/examples/leopard.jpg"); color: #d73611; text-shadow: 2px 2px black; padding: 20px; border: 10px dashed #333; font-size: 2em; font-weight: bold; }

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

css
/* 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.

Définition formelle

Valeur initialeborder-box
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Valeur calculéecomme spécifié
Type d'animationune liste répétable

Syntaxe formelle

background-clip = 
 <bg-clip># 

<bg-clip> = 
 <visual-box> |
 [ border-area || text ] 

<visual-box> = 
 content-box |
 padding-box |
 border-box

Exemples

CSS

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, 0.2); }

HTML

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

Specification
CSS Backgrounds and Borders Module Level 3
# background-clip
CSS Backgrounds Module Level 4
# background-clip

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content