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)
Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de background-clip.

background-clip - Syntax DiagramSyntax diagram of the background-clip CSS property. border-box border-box padding-box padding-box content-box content-box text text , ,background-clip:;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).

Javascript
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.).

Javascript
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.

Javascript
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.

JQuery

$('#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.

JQuery
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 :
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.

1
Propriété
background-clip
2
Valeur
text
Estimation de la prise en charge globale.
96%
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

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.

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.

Propriétés :

background
Résumé des propriétés de l'arrière-plan.
background-attachment
Mode de défilement de l'image d'arrière-plan.
background-color
Définit la couleur en arrière-plan.
background-image
Définit l'image ou dégradé d'arrière-plan (plusieurs images ou dégradés peuvent coexister).
background-origin
Définit une référence pour positionner l'image d'arrière-plan.
background-position
Définit comment se positionne l'image d'arrière-plan.
background-position-x
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
background-position-y
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
background-repeat
Définit comment est répétée l'image d'arrière-plan.
background-size
Dimensionnement de l'image d'arrière-plan.
border
Propriété résumée qui définit l'ensemble des paramètres des bordures.
border-bottom-left-radius
Définit le rayon de l'angle arrondi en bas à gauche.
border-bottom-right-radius
Définit le rayon de l'angle arrondi en bas à droite.
border-color
Définit la couleur des bordures.
border-image
Résumé des propriétés des bordures réalisées avec des images.
border-image-outset
Définit le débordement de l'image de bordure.
border-image-repeat
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue.
border-image-slice
Définit comment l'image de bordure est découpée.
border-image-source
Définit l'image utilisée pour construire la bordure.
border-image-width
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
border-radius
Rayon des angles arrondis.
border-style
Type de bordure (solide, double, pointillé...).
border-top-left-radius
Définit le rayon de l'angle arrondi en haut à gauche.
border-top-right-radius
Définit le rayon de l'angle arrondi en haut à droite.
border-width
Définit l'épaisseur de la bordure de l'élément.
box-shadow
Applique un effet d'ombrage sur les blocs en indiquant tous les paramètres : couleur, décalage de l'ombre, flou, etc.