來源 | https://www.fly63.com/

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

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

01

margin:0px;background: url(images/bg.png) no-repeat;background-size:100% 100%;background-attachment:fixed;

url(images/beijing.png)——圖片路徑的位置；

no-repeat—— 圖片不重復；

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

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

background-size: cover;——把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(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標簽指定背景圖，這樣背景圖就可以填充整個瀏覽器viewport了。其實，該方案對所有的塊級容器都可以生效。塊級容器的寬高是動態(tài)的，那么背景圖將自動伸縮，充滿整個容器。

css body標簽的樣式如下：

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

總結(jié)

以上就是我今天與你分享的內(nèi)容，如果你覺得有幫助，請記得分享給你的朋友，也許能夠幫助到他。

最后，感謝你的閱讀，記得點贊我，關(guān)注我。

學習更多技能

請點擊下方公眾號