CSS3之多背景background使用示例

background-image: [background-image], [background-image], [background-image];
background-position: [background-position], [background-position], [background-position];
background-repeat: [background-repeat], [background-repeat], [background-repeat];

background: [background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat];

.a {width:300px;}
.b {background:url("http://.leemagnum./img/left.jpg") no-repeat left ,
url("http://.leemagnum./img/right.jpg") no-repeat right ;padding:0 10px;}
.b div {background:url("http://.leemagnum./img/mid.jpg") repeat-x left ;height:48px;}

<div class="a">
<div class="b">
<div>梦龙小站</div>
</div>
</div>

div {width:300px;height:80px;border:1px solid #000;
background:url("http://.leemagnum./img/logo.jpg") no-repeat,
url("http://.leemagnum./img/a.jpg") no-repeat right -300px;
-webkit-transition:0.5s background-position ease;
}
div:hover {background-position:0 0,right 0;}

<div></div>