Gestion élaborée des arrières plans en css3

par

Origine de l’arrière plan:

Exemple de code:

<style>
div {
float : left;
border : dashed 10px #000;
background-color : #ccc;
padding : 20px;
width : 240px;
height : 240px;
margin : 20px;
background-position: bottom right;
background-repeat : no-repeat;
background-image: url(image.jpg);
}
 
div:nth-of-type(1){
-webkit-background-origin : border-box;
background-origin : border-box;
}
 
div:nth-of-type(2){
-webkit-background-origin : padding-box;
background-origin : padding-box;
}
 
div:nth-of-type(3){
-webkit-background-origin : content-box;
background-origin : content-box;
}
 
</style>
 
<body>
<div></div>
<div></div>
<div></div>
</body>
 

Voir le résultat

Ecrêtage global de l’arrière plan

Exemple de code:

<style>
div {
float : left;
border : dashed 10px #000;
background-color : #ccc;
padding : 20px;
width : 240px;
height : 240px;
margin : 20px;
background-position: bottom right;
background-repeat : no-repeat;
background-image: url(image.jpg);
-webkit-background-origin : border-box;
background-origin : border-box;
}
 
div:nth-of-type(1){
-webkit-background-clip: border-box;
background-clip: border-box;
}
 
div:nth-of-type(2){
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
 
div:nth-of-type(3){
-webkit-background-clip: content-box;
background-clip: content-box;
}
 
</style>
 
<body>
<div></div>
<div></div>
<div></div>
</body>
 

Voir le résultat

 

Laisser un commentaire