CSS3之多背景background使用示例

2024-07-11 08:28:12

字體：大中小

來源：轉載

供稿：網友

CSS3中新加了多背景這個屬性，和CSS2的使用方法一樣，只不過圖片可以從1個圖片變成多個圖片了。在CSS3中多背景的使用是非常常見的，所以，這個多背景的屬性應用很普遍的，所以掌握CSS3之多背景background是當務之急呀。

一、background的語法

1、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];

2、background的簡寫

復制代碼

代碼如下:
background: [background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat];

二、background的兼容情況

三、background的實例

1、圓角效果

CSS代碼：

復制代碼

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

HTML代碼：

復制代碼

代碼如下:
<div class="a">
<div class="b">
<div>夢龍小站</div>
</div>
</div>

預覽效果：

2、多背景圖片

CSS代碼：

復制代碼

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

HTML代碼：

復制代碼

代碼如下:
<div></div>

預覽效果：

(1)默認狀態