Background-clip - Propriété CSS
Résumé des caractéristiques de la propriété background-clip
border-box
| content-box
| padding-box
| text
border-box
background-clip
passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de background-clip
.
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 pagebackground
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.
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.
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.
background-clip
pour découper les images d'arrière-plan en fonction de l'élément.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.
background-clip
text
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
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 2002Document de travail.17 Décembre 2009Candidat à 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.