Accueil    CSS    Propriété Background-clip
 



style css background-clip  Style CSS background-clip

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété background-clip permet de définir la zone d'application de la couleur d'arrière-plan l'arrière-plan du conteneur :
    - border-box : occupation complète, bordure inclue
    - padding-box : occupation de tout l'intérieur de l'élément à l'exception des bordures
    - content-box : occupation du contenu uniquement (espacé de la bordure par un padding)
Safari ne gère pas ce style mais propose une alternative : "-webkit-background-clip".

Pour définir la zone d'application d'une image d'arrière-plan suivant ces mêmes critères, il faut employer le style css background-origin.

Il est possible d'associer les styles background-clip et background-origin, cependant si la propriété backgroud-clip est plus restrictive que la propriété background-origin, l'image de fond sera partiellement tronquée.



Propriétés pour le style background-clip :




Propriété Définition Valeurs CSS
background-clip Défini la zone d'occupation de l'arrière-plan du conteneur border-box
content-box
padding-box
CSS 3


Exemple d'utilisation du style css background-repeat :






<div style="width:350px; height:80px; border:dashed 3px black;
   background-color:lightsteelblue; background-clip:border-box;
   -webkit-background-clip:border-box;">
   Exemple d'arrière plan avec la propriété :
   background-clip:border-box
</div>

<div style="width:350px; height:80px; border:dashed 3px black;
   background-color:lightsteelblue; background-clip:padding-box;
   -webkit-background-clip:padding-box;">
   Exemple d'arrière plan avec la propriété :
   background-clip:padding-box
</div>

<div style="width:350px; height:80px; border:dashed 3px black;
   background-color:lightsteelblue; background-clip:content-box;
   -webkit-background-clip:content-box;">
   Exemple d'arrière plan avec la propriété :
   background-clip:content-box
</div>



Exemple d'arrière plan avec la propriété :
background-clip:border-box



Exemple d'arrière plan avec la propriété :
background-clip:padding-box



Exemple d'arrière plan avec la propriété :
background-clip:content-box