一張清晰漂亮的背景圖片能給網(wǎng)頁(yè)加分不少，設(shè)計(jì)師也經(jīng)常會(huì)給頁(yè)面的背景使用大圖，我們既不想圖片因?yàn)椴煌直媛蕡D片變形，也不希望當(dāng)在大屏的情況下，背景有一塊露白，簡(jiǎn)而言之，就是實(shí)現(xiàn)能自適應(yīng)屏幕大小又不會(huì)變形的背景大圖，而且背景圖片不會(huì)隨著滾動(dòng)條滾動(dòng)而滾動(dòng)。

因此，今天我們將與你分享3種CSS實(shí)現(xiàn)背景圖圖片全屏鋪滿自適應(yīng)的方式，希望對(duì)你有所幫助。

01

margin:0px;
background: url(images/bg.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
url(images/beijing.png)——圖片路徑的位置；

no-repeat—— 圖片不重復(fù)；

center 0px——center是距離頁(yè)面左邊的定位，0px是距離頁(yè)面上面的定位；

background-position: center 0——就是圖片的定位，同上；

background-size: cover;——把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中；

min-height: 100vh;——視窗的高度，“視區(qū)”所指為瀏覽器內(nèi)部的可視區(qū)域大小，即window.innerWidth/ window.innerHeight大小。

02

background: url("bg.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;//或者background-size:100%;

03

給body標(biāo)簽指定背景圖，這樣背景圖就可以填充整個(gè)瀏覽器viewport了。其實(shí)，該方案對(duì)所有的塊級(jí)容器都可以生效。塊級(jí)容器的寬高是動(dòng)態(tài)的，那么背景圖將自動(dòng)伸縮，充滿整個(gè)容器。

css body標(biāo)簽的樣式如下：

body {
/* 加載背景圖 */
background-image: url(images/bg.jpg);
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當(dāng)內(nèi)容高度大于圖片高度時(shí)，背景圖像的位置相對(duì)于viewport固定 */
background-attachment: fixed;
/* 讓背景圖基于容器大小伸縮 */
background-size: cover;
/* 設(shè)置背景顏色，背景圖加載過(guò)程中會(huì)顯示背景色 */
background-color: #464646;
}

到此這篇關(guān)于CSS實(shí)現(xiàn)背景圖片全屏鋪滿自適應(yīng)的3種方式的文章就介紹到這了,更多相關(guān)CSS背景全屏鋪滿自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論