Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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.
Type de valeur
Boîte (plusieurs valeurs peuvent être énumérées dans le cas d'arrière-plans multiples).
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:: CRD (document proposé pour la recommandation)

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.

Syntaxes pour background-clip.

n est le nombre d'arrière-plans définis pour cet élément.

background-clip:
Schéma syntaxique de la propriété background-clipSyntaxe de background-clip, propriété CSS pour recouper un arrière-plan. border-box border-box padding-box padding-box content-box content-box text text , ,
;
  • 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: content-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).

  • background-clip: initial; background-clip: inherit; background-clip: revert; background-clip: revert-layer; background-clip: unset;

    La valeur initiale est : border-box.

Exemple pour 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

Possibilité d'animation.

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.

 

Manipuler background-clip par programme.

En Javascript, deux syntaxes sont possibles pour modifier la valeur de background-clip d'un élément el : 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 (une majuscule pour séparer les mots).


function setBackgroundClip(el) {
el.style['background-clip']='content-box';
}
ou

function setBackgroundClip(el) {
el.style.backgroundClip='content-box';
}
 

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


function getBackgroundClip(el) {
return el.style['background-clip'];
}
ou

function getBackgroundClip(el) {
return el.style.backgroundClip;
}

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.


function getBackgroundClip(el) {
return window.getComputedStyle(el).getPropertyValue('background-clip');
}

Avec JQuery, voici comment modifier la valeur de la propriété background-clip pour un élément el :


function getBackgroundClip(el) {
$(el).css('background-clip','content-box');
}
ou

function setBackgroundClip(el) {
$(el).css('backgroundClip','content-box');
}

Avec JQuery, lire la valeur calculée de la propriété background-clip d'un élément el peut se faire avec les codes suivants.


function getBackgroundColor(el) {
return $(el).css('background-clip');
}
ou

function setBackgroundColor(el) {
return $(el).css('backgroundClip');
}

Exemple interactif.

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

Prise en charge par les navigateurs (compatibilité).

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 par les navigateurs de la propriété background-clip.
Colonne 2
Traitement correct de la valeur content-box dans la syntaxe de la propriété background-clip.
Colonne 3
Traitement correct de la valeur non standard text permettant de couper une image d'arrière-plan en fonction du texte d'avant plan.
1
background-clip
2
background-clip
content-box
3
background-clip
text
Estimation de la prise en charge en pourcentage du parc actuel.
96%
96%
3%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que background-clip.

Les spécifications CSS éditées par le W3C sont organisées en modules. background-clip fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Mode de défilement de l'image d'arrière-plan.
Définit la couleur de l'arrière-plan.
Image d'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Définit comment est répété l'image d'arrière-plan.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Définit la couleur des bordures.
Résumé des propriétés des bordures réalisées avec des images.
Définit le débordement de l'image de bordure.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit comment l'image de bordure est découpée.
Définit l'image utilisée pour construire la bordure.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Type de bordure (simple, double, pointillé...).
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.