您好,登錄后才能下訂單哦!
如何使用CSS3中background-image實(shí)現(xiàn)多背景圖片?針對這個問題,今天小編總結(jié)了這篇文章,希望能幫助更多想解決這個問題的朋友找到更加簡單易行的辦法。
1、實(shí)現(xiàn)以下效果,使用純DIV+CSS,必須使用background-image
附加說明:
1、整體寬度是1000px,高300px,要求頁面居中顯示
2、背景圖片寬,高均為300px
3、每張圖片都是當(dāng)做背景圖片來呈現(xiàn)的
1、準(zhǔn)備素材:根目錄創(chuàng)建images文件夾,把相關(guān)素材圖片都存放與此,素材有
2、創(chuàng)建好index.html,寫好架構(gòu),架構(gòu)如何分析呢
思路分析:
1、目標(biāo)由3個div組成,每個div的背景圖片都是一樣的,都是3張照片,只不過仔細(xì)觀察,就是第二張背景圖片的位置顯示不同
2、每個div都帶有一個標(biāo)題
根據(jù)分析,我們得出以下代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多重背景</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div class="container"> <h5>效果1</h5> <div class="demo bg1"></div> <h5>效果2</h5> <div class="demo bg2"></div> <h5>效果3</h5> <div class="demo bg3"></div> </div> </body> </html>
3、寫樣式 ,創(chuàng)建css文件夾,里面新建index.css,里面的樣式怎么寫了,以下是分析思路
思路分析:
1、.container *
思路分析
1、為了設(shè)置容器里的所有元素的公共樣式,我們可以將這些公共代碼寫入.container * 樣式內(nèi)
所以index.css中添加代碼如下:
.container *{ padding:0; margin:0; }
2、h5標(biāo)題
思路分析:
1、要求文本居中,所以轉(zhuǎn)成代碼即 text-align: center;、
所以index.css中添加代碼如下:
h5{ text-align: center; }
3、.demo
思路分析:
1、根據(jù)要求得知寬1000,高300,所以轉(zhuǎn)成代碼即width:1000px;height:300px;背景圖片不是一張是3張,且不重復(fù)所以
background-image: url(images/gtl1.jpg),
url(images/gtl2.jpg),
url(images/gtl3.jpg);
background-repeat: no-repeat, no-repeat, no-repeat;
帶邊框所以border: 1px solid #999;要居中且有上邊距所以margin: 0 auto 20px auto;
所以index.css中添加代碼如下:
.demo { width: 1000px; height: 300px; border: 1px solid #999; background-image: url(images/gtl1.jpg), url(images/gtl2.jpg), url(images/gtl3.jpg); background-repeat: no-repeat, no-repeat, no-repeat; margin: 0 auto 20px auto; }
4、3種不同的背景位置設(shè)置
思路分析:
1、第一種方式是第一張背景圖片靠最左邊顯示,第二張居中,此刻它的left值=(1000-300)/2=350,第三張?jiān)谧钣疫?/span>
2、第二種方式是第一張背景圖片靠最左邊顯示,第二張緊挨著第一張,此刻它的left值=第一張背景圖片的寬度300,第三張?jiān)谧钣疫?/span>
3、第三種方式是第一張背景圖片靠最左邊顯示,第二張緊挨著第三張,此刻它的left值=1000-第二張+第三張的總體寬度=1000-600=400,第三張?jiān)谧钣疫?/span>
注意:如果都不設(shè)置background-positon默認(rèn)都是靠左顯示,那么會存在重疊的情況
所以index.css中添加代碼如下:
.bg1 { background-position: left top, 350px 0, 700px 0; } .bg2 { background-position: left top, 300px 0, 700px 0; } .bg3 { background-position: left top, 400px 0, 700px 0; }
到此為止,index.css的全部內(nèi)容如下:
.container *{ padding:0; margin:0; } h5{ text-align: center; } .demo { width: 1000px; height: 300px; border: 1px solid #999; background-image: url(../images/gtl1.jpg), url(../images/gtl2.jpg), url(../images/gtl3.jpg); background-repeat: no-repeat, no-repeat, no-repeat; margin: 0 auto 20px auto; } .bg1 { background-position: left top, 350px 0, 700px 0; } .bg2 { background-position: left top, 300px 0, 700px 0; } .bg3 { background-position: left top, 400px 0, 700px 0; }
然后將index.css引入index.html中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多重背景</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <div class="container"> <h5>效果1</h5> <div class="demo bg1"></div> <h5>效果2</h5> <div class="demo bg2"></div> <h5>效果3</h5> <div class="demo bg3"></div> </div> </body> </html>
運(yùn)行效果如下
到此為止,我們就實(shí)現(xiàn)了全部的需求
1、background-image可以設(shè)置多背景圖片,語法格式如下:
background-image: url(圖片地址1),
url(圖片地址2),
url(圖片地址3).......還可以N個;
2、如果設(shè)置了多背景圖片,那么在設(shè)置 background-repeat和 background-position的時候要注意順序和圖片設(shè)置的順序一樣,如果設(shè)置成一個,那么說明所有的背景圖片都是一樣的設(shè)置
看完這篇文章,你們學(xué)會使用CSS3中background-image實(shí)現(xiàn)多背景圖片的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。