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.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:
;
- 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 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).
- 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.
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';
}
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'];
}
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');
}
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');
}
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.
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.
background-clip
.
content-box
dans la syntaxe de la propriété background-clip
.
text
permettant de couper une image d'arrière-plan en fonction
du texte d'avant plan.
background-clip
background-clip
content-box
background-clip
text
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.