Background-clip - Propriété CSS

background-clip

Résumé des caractéristiques de la propriété `background-clip`

Description rapide

Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..

Statut

Standard

S'applique à

Tous les éléments.

Utilisable sur

HTML

Valeurs prédéfinies

border-box | content-box | padding-box | text

Pourcentages

Ne s'appliquent pas.

Valeur initiale

border-box

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété background-clip passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Arrière-plans et bordures

Références (W3C)

CSS Backgrounds and Borders Module Level 3

Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de `background-clip`.

Schéma syntaxique de la propriété background-clip.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

La syntaxe peut être répétée autant de fois qu'il y a d'arrière-plans définis pour l'élément, les occurrences étant séparées par des virgules.

Description de la propriété `background-clip`.

background-clip définit jusqu'où s'étend l'arrière-plan de l'élément : jusqu'à la bordure, juste sous le contenu, etc. Si la bordure n'est pas pleine (pointillés, double trait, etc) ou si elle n'est pas totalement opaque, le fond peut être visible également sous la bordure.

Pour une présentation générale des arrière-plans, reportez-vous à la page background.

Valeurs pour `background-clip`.

background-clip: border-box;

Valeur par défaut pour background-clip. L'arrière plan s'étend jusque sous la bordure.
background-clip: padding-box;

L'arrière plan s'arrête juste avant la bordure,en couvrant la zone des marges intérieures (padding).
background-clip: content-box;

L'arrière plan s'étend juste sous le contenu du bloc.
background-clip: padding-box, border-box...;

Plusieurs valeurs peuvent être énumérées, séparées par des virgules, lorsque plusieurs arrière-plans ont été définis par background-image. Reportez-vous à la page background pour une explication sur les arrière-plans multiples.
background-clip: text; ⚠

L'arrière-plan est découpé par le texte : il n'est visible que derrière les caractères. Si ces derniers sont dans une couleur semi-transparente, l'effet peut-être intéressant (voir exemple plus bas).

Échantillon
background-clip: initial; (border-box) background-clip: inherit; background-clip: revert; background-clip: revertLayer; background-clip: unset;

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemples d'utilisation de la propriété `background-clip`.

L'exemple ci-dessous illustre une possibilité intéressante de la propriété background-clip utilisée avec la valeur text, malheureusement non standard et non documentée par le W3C.
L'élément ci-dessous comporte un texte transparent et dans une police particulièrement épaisse.

LETTRES GRAPHIQUES

Exemple d'animation de `background-clip`.

background-clip peut être animée mais, comme cette propriété ne traite pas de valeurs numériques, le passage d'une valeur à l'autre se fait de façon brutale. Si on souhaite que toutes les valeurs autorisées pour background-clip soient incluses dans l'animation, il faut les préciser dans la séquence @keyframes.

Accéder à la propriété `background-clip` par programme.

Écrire la valeur de `background-clip` en Javascript.

En Javascript, deux syntaxes sont possibles pour modifier la valeur de background-clip : le nom de la propriété peut être écrit dans la notation kebab-case typique de CSS (un tiret pour séparer les mots), ou dans la notation camel-case plus proche de la notation habituelle en Javascript (une majuscule pour séparer les mots).


	let el = document.getElementById('id');
	el.style['background-clip'] = 'border-box';
	// ou
	let el = document.getElementById('id');
	el.style.backgroundClip = 'border-box';

Lire la valeur de `background-clip`.

Pour lire la valeur de background-clip en Javascript, on dispose également de deux syntaxes. Attention ! ce code ne fonctionne que si la propriété a été affectée directement à l'élément lui-même, et pas à une classe par exemple. La valeur est renvoyée telle qu'elle a été définie dans la feuille de styles (content-box, padding-box, etc.).


	let el = document.getElementById('id');
	let value = el.style['background-clip'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.backgroundClip;

Obtenir la valeur calculée de `background-clip`.

Pour obtenir la valeur calculée de background-clip, le code est un rien plus compliqué. La valeur de background-clip est renvoyée sous la forme d'une des valeurs prédéfinies : content-box, border-box, etc.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('background-clip');

Et avec JQuery.

Avec JQuery, voici comment modifier la valeur de la propriété background-clip.


 $('#id').css('background-clip', 'border-box');
 // ou
 $('#id').css('backgroundClip', 'border-box');

Lire la valeur calculée de `background-clip`.

Avec JQuery, lire la valeur calculée de la propriété background-clip peut se faire avec les codes suivants.


	let value = $('#id').css('background-clip');

Autres exemples de code.

Vous trouverez d'autres exemples de code sur la page Javascript et CSS, toujours concernant Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété background-clip et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de background-clip ces deux boutons doivent donner la même chose puisque background-clip n'accepte que des valeurs prédéfinies.

Exemple interactif avec la propriété `background-clip`.

La bordure de cet élément et le texte sont semi-transparents, afin de laisser voir l'image d'arrière-plan à travers.

background-clip :

border-box

content-box

padding-box

text

Texte

Compatibilité des navigateurs avec `background-clip`.

La propriété background-clip ne présente pas de problème de compatibilité sur les navigateurs actuels. Attention cependant à la valeur text qui n'est pas standardisée et doit être utilisée avec précaution.

Colonne 1

Support de la propriété background-clip pour découper les images d'arrière-plan en fonction de l'élément.

Colonne 2

Suport de la valeur text dans la syntaxe de background-clip.

Remarques :

(1) Ne fonctionne pas en position relative.

(2) Supporté avec le préfixe du navigateur -webkit-.
Ne fonctionne pas en position relative.

Propriété
background-clip

Valeur
text

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `background-clip`.

La propriété background-clip est apparue bien plus tard que les autres propriétés relatives aux arrière-plans : il faudra attendre la version 3 de CSS.

Module CSS - Arrière-plans et bordures - Niveau 3

Première définition de la propriété background-clip.

02 Août 2002
Document de travail.
17 Décembre 2009
Candidat à la recommandation.

Voir aussi, au sujet des arrière-plans.

La spécification du W3C "CSS Backgrounds and Borders Module" regroupe tout ce qui concerne les arrière-plans : de nombreuses propriétés que nous listons ci-dessous.