CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)
CSS3的誕生為我們解決了這一問題,在CSS3里,通過background-image或者background可以為一個(gè)容器設(shè)置多張背景圖像,也就是說可以把不同背景圖象只放到一個(gè)塊元素里。
首先我們來看一下語法吧:
background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] | [background-position]
多個(gè)背景圖片的url之間使用逗號隔開即可,如果有多個(gè)背景圖片,而其他屬性只有一個(gè)(例如background-repeat只有一個(gè)),那么所有背景圖片都應(yīng)用該屬性值。
下面我們就看一個(gè)例子吧:
這里我們要使用5張圖片作為一個(gè)div容器的背景,我們來看一下代碼:
HTML代碼:
<div class="div1">
<a href="#" title="我們">我們</a>
</div>
CSS代碼:
.div1{
margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;
background-image:url(images/1.jpg),url(images/2.jpg),url(images/3.jpg),url(images/4.jpg),url(images/5.jpg);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right,center center;
}
效果如下圖:
在上面的代碼中有這一句:
background-repeat:no-repeat;
寫一個(gè)值就行了,效果是完全一樣的。
當(dāng)然上面設(shè)置背景圖片的各個(gè)屬性時(shí)是分開寫的,那么我們也可以把背景圖片的各個(gè)屬性寫在一塊,這時(shí)的CSS代碼如下:
.div1{
...
background:url(images/1.jpg) no-repeat top left,
url(images/2.jpg) no-repeat top right,
url(images/3.jpg) no-repeat bottom left,
url(images/4.jpg) no-repeat bottom right,
url(images/5.jpg) no-repeat center center;
...
}
哦了,CSS3多種背景就是這么回事兒,很簡單吧。下面提供了完整的源碼及示例,可以作為一個(gè)參考。
欄 目:CSS/HTML
下一篇:完美實(shí)現(xiàn)浮動(dòng)元素橫排居中顯示
本文標(biāo)題:CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)
本文地址:http://www.jygsgssxh.com/a1/CSS_HTML/11512.html
您可能感興趣的文章
- 01-11CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享
- 01-11CSS3中Transition屬性詳解以及示例分享
- 01-11CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- 01-11如何使用CSS3畫出一個(gè)叮當(dāng)貓
- 01-11利用CSS3新特性創(chuàng)建透明邊框三角
- 01-11《CSS3實(shí)戰(zhàn)》筆記--漸變設(shè)計(jì)(三)
- 01-11《CSS3實(shí)戰(zhàn)》筆記--漸變設(shè)計(jì)(一)
- 01-11《CSS3實(shí)戰(zhàn)》筆記--漸變設(shè)計(jì)(二)
- 01-11HTML基本語法和語義寫法規(guī)則與實(shí)例
- 01-11CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫特效


閱讀排行
本欄相關(guān)
- 04-02html5算法,html5協(xié)議
- 04-02html5圖形,html5圖形縮放
- 04-02html5登錄模板,html5登錄注冊模板
- 04-02html5的例子,HTML示例
- 04-02html5的canvas,html5的canvas的作用
- 04-02關(guān)于html5播放視頻代碼的信息
- 04-02html5chm手冊,html操作手冊
- 04-02朋友圈html5,朋友圈發(fā)泄情緒的句子
- 04-02html5的新特性有哪些,HTML5的新特性有哪
- 04-02html5掃二維碼,html5調(diào)用手機(jī)攝像頭掃描
隨機(jī)閱讀
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-10C#中split用法實(shí)例總結(jié)
- 04-02jquery與jsp,用jquery
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10delphi制作wav文件的方法
- 08-05織夢dedecms什么時(shí)候用欄目交叉功能?
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文


