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, quis consequuntur. </div>
<div id="d3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate explicabo, quis consequuntur. </div>

 

Résultat visuel

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera
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-repeatbackground-size– background-origin– background-clip– background-attachment