Hi Friends...
with multiple backgrounds, designers can achieve very interesting
effects. They can stack different images as backgrounds of the same
element. Each image (or layer) can be moved and animated independently,
like you can see in the demo below (try hovering over the image with
your mouse). All background-releated CSS rules can now take a
comma-delimited list of properties, each for the specific background
image:
Demo:
HTML & CSS Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.space{
/* Pass a comma separated list of backgrounds: */
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ6FKJ82if_pT9ITLfSd8H9a5E7MmyNaXSnHuIund4GhOpVJtkM5HVjvJVqH-W9a60K5nAjdOJSRV7tFOCtYxcVSrK5DV7hX9DRfx3TJBCT8dFHrWLf0lFBpCt46pb9CS1GIsCNEeeAuaL/s1600/rocket_big.png') no-repeat center 70px, url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi92JS-WlId87HRrbY5p-0sfHXLJ1QijYkq32PjGUvahl34sQF3Sij7tlf5qseY-EMcR1y_l5zIxaFtRe7JbtxgFZFohrNcqqwpCovRqJ4IKcJpzwIA31OzcrCBCsAa9tsFMnbTVeC8x5eB/s1600/space.jpg') no-repeat bottom center;
width:200px;
height:200px;
margin: 0 auto;
border-radius:3px;
/* Animate the positions of both of the backgrounds */
transition:background-position 1s;
}
.space:hover{
/* The same goes for properties like background-position and repeat */
background-position:35% 20px, top right;
}
</style>
</head>
<body>
<div class="space">
</div>
</body>
</html> >
<head>
<title></title>
<style>
.space{
/* Pass a comma separated list of backgrounds: */
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ6FKJ82if_pT9ITLfSd8H9a5E7MmyNaXSnHuIund4GhOpVJtkM5HVjvJVqH-W9a60K5nAjdOJSRV7tFOCtYxcVSrK5DV7hX9DRfx3TJBCT8dFHrWLf0lFBpCt46pb9CS1GIsCNEeeAuaL/s1600/rocket_big.png') no-repeat center 70px, url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi92JS-WlId87HRrbY5p-0sfHXLJ1QijYkq32PjGUvahl34sQF3Sij7tlf5qseY-EMcR1y_l5zIxaFtRe7JbtxgFZFohrNcqqwpCovRqJ4IKcJpzwIA31OzcrCBCsAa9tsFMnbTVeC8x5eB/s1600/space.jpg') no-repeat bottom center;
width:200px;
height:200px;
margin: 0 auto;
border-radius:3px;
/* Animate the positions of both of the backgrounds */
transition:background-position 1s;
}
.space:hover{
/* The same goes for properties like background-position and repeat */
background-position:35% 20px, top right;
}
</style>
</head>
<body>
<div class="space">
</div>
</body>
</html> >
0 comments:
Post a Comment