attribut BACKGROUND-CLIP
Rôle
L’attribut background-clip permet de spécifier la zone de recouvrement d’une couleur ou d’une image d’arrière-plan.
En effet une couleur de fond peut recouvrir :
- le contenu seulement
- le contenu avec la marge interne (padding) mais sans la bordure
- le contenu avec la marge interne (padding) et la bordure
Version : CSS3
Héritage (inherit) : non
Propriété Javascript : element.style.backgroundClip
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
div{
width: 150px;
padding:25px;
border: 5px grey dashed;
background-color: pink;
float: left;
margin: 10px;
}
#d1{
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: border-box;
}
#d2{
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
#d3{
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: content-box;
}
– Le code HTML
<div id="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate explicabo, quis consequuntur. </div>
<div id="d2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate explicabo, uis consequuntur. </div>
<div id="d3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate explicabo, uis consequuntur. </div>
Résultat visuel
Compatibilité
L’attribut background-size est pris en charge par tous les principaux navigateur.
A partir de IE-9. Pour implémenter cet attribut sur un ensemble de navigateur ,utilisez les préfixes -webkit- (Chrome, Safari, Android…), -moz- (Mozilla), -o- (Opera).
Valeurs
Les différentes valeurs de l’attribut background-clip sont:
- content-box
- Le fond recouvre le contenu seulement
Syntaxe :
background-clip : content-boxExemple : - paddind-box
- Le fond recouvre le contenu et la marge interne (padding) sans la bordure
Syntaxe :
background-clip : padding-boxExemple : - border-box
- Le fond recouvre le contenu et la marge interne (padding) avec la bordure
Syntaxe :
background-clip : border-boxExemple : - initial
- Le fond est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un paragraphe peut ignorer le recouvrement de du fond imposée par une feuille de style qui le cible.
Syntaxe :
background-clip : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
background-clip : inherit
A voir aussi
background– background-color– background-image– background-position– background-repeat–background-size– background-origin– background-clip– background-attachment
