CSS3之多背景background使用示例
發(fā)布時(shí)間：2013-10-18 11:28:09 作者：佚名 
我要評(píng)論
我要評(píng)論CSS3之多背景background和CSS2的使用方法一樣，只不過(guò)圖片可以從1個(gè)圖片變成多個(gè)圖片了，其在CSS3的項(xiàng)目中運(yùn)用比較廣泛，大家有更好的案例要積極分享喲
CSS3中新加了多背景這個(gè)屬性，和CSS2的使用方法一樣，只不過(guò)圖片可以從1個(gè)圖片變成多個(gè)圖片了。在CSS3中多背景的使用是非常常見(jiàn)的，所以，這個(gè)多背景的屬性應(yīng)用很普遍的，所以掌握CSS3之多背景background是當(dāng)務(wù)之急呀。
一、background的語(yǔ)法
1、background的分寫(xiě)
復(fù)制代碼
代碼如下: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的簡(jiǎn)寫(xiě)
復(fù)制代碼
代碼如下:background: [background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat];
二、background的兼容情況
三、background的實(shí)例
1、圓角效果
CSS代碼：
復(fù)制代碼
代碼如下:.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代碼：
復(fù)制代碼
代碼如下:<div class="a">
<div class="b">
<div>夢(mèng)龍小站</div>
</div>
</div>
預(yù)覽效果：
2、多背景圖片
CSS代碼：
復(fù)制代碼
代碼如下: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代碼：
復(fù)制代碼
代碼如下:<div></div>
預(yù)覽效果：
(1)默認(rèn)狀態(tài)
(2)hover狀態(tài)
CSS3之多背景background就為大家介紹完了，希望能對(duì)大家有所幫助。CSS3之多背景background在CSS3的項(xiàng)目中運(yùn)用比較廣泛，大家有更好的案例要積極分享喲。
相關(guān)文章
CSS3實(shí)現(xiàn)多背景模擬動(dòng)態(tài)邊框的效果
前幾天在工作的時(shí)候遇到一個(gè)問(wèn)題，項(xiàng)目需要實(shí)現(xiàn)一個(gè)效果，當(dāng)鼠標(biāo)移入一個(gè)元素的時(shí)候，元素出現(xiàn)一個(gè)動(dòng)態(tài)的邊框，通過(guò)網(wǎng)上查找資料看到有人推薦可以使用Css3來(lái)實(shí)現(xiàn)，后來(lái)試了2016-11-08CSS3點(diǎn)擊按鈕實(shí)現(xiàn)背景漸變動(dòng)畫(huà)效果
這篇文章給大家介紹的是，利用CSS3實(shí)現(xiàn)當(dāng)點(diǎn)擊按鈕的時(shí)候，按鈕的背景是漸變動(dòng)畫(huà)的效果，實(shí)現(xiàn)后的效果非常好，開(kāi)發(fā)的時(shí)候利用這種效果的按鈕會(huì)給用戶一種非常酷炫的感受，感2016-10-19- 這篇文章主要介紹了CSS3條紋背景制作的實(shí)戰(zhàn)攻略,根據(jù)Forefox瀏覽器和webkit內(nèi)核的瀏覽器兩種情況來(lái)分別講解,需要的朋友可以參考下2016-05-31
使用CSS3實(shí)現(xiàn)多列布局與多背景的技巧
這篇文章主要介紹了使用CSS3實(shí)現(xiàn)多列布局與多背景的技巧,包括多列欄目的高度平衡和多間隙等一些細(xì)節(jié)方面的調(diào)整方法講解,需要的朋友可以參考下2016-02-29- 這篇文章主要介紹了用CSS3實(shí)現(xiàn)背景漸變的方法,作者并沒(méi)有給出效果demo這個(gè)比較殘念...需要的朋友可以參考下2015-07-14
- background-size是css3提供的一個(gè)新特性，它可以讓你隨心所欲的控制背景圖片的大小。下面我們來(lái)一步步看看這個(gè)新特性都有什么值得我們驚艷的地方2014-09-02
使用CSS3的背景漸變Text Gradient 創(chuàng)建文字顏色漸變
使用CSS3 的背景漸變 -webkit-gradient ，用一個(gè)背景漸變的 DIV 代替圖片。下面是實(shí)現(xiàn)效果示例，相比以上方案優(yōu)點(diǎn)是不使用圖片，減小請(qǐng)求量和流量2014-08-19多重CSS背景動(dòng)畫(huà)實(shí)現(xiàn)方法示例
CSS背景動(dòng)畫(huà)很長(zhǎng)時(shí)間以來(lái)都是一個(gè)熱門(mén)話題，很多時(shí)候都是因?yàn)樾Ч貏e絢麗，而且不需要額外的技術(shù)。最近有人問(wèn)我是否可以給頁(yè)面上一個(gè)指定的元素安排多重背景動(dòng)畫(huà)，答案是y2014-04-04- CSS3背景尺寸Background-size，這個(gè)屬性是改變背景尺寸的通過(guò)各種不同是屬性值改變背景尺寸呈現(xiàn)的大小，下面為大家詳細(xì)介紹下其語(yǔ)法、瀏覽器兼容及使用示例，感興趣的朋友2013-10-14
css3背景_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了css3背景,CSS3規(guī)范中對(duì)背景這一部分，新加入了一些令人興奮的功能，如可以設(shè)置多個(gè)背景圖片、可以指定背景大小、設(shè)置背景漸變等功能。2017-07-11