學(xué)生網(wǎng)頁設(shè)計中常用的簡單設(shè)置網(wǎng)頁背景圖片方法

更新時間：2020-03-22 文章分類：網(wǎng)頁技術(shù)課堂

1、從上到下漸變橫向相同背景
漸變從上到下寬度全屏背景，這種網(wǎng)頁背景只需要切出1像素寬，高度合適的圖片作為背景素材。

CSS代碼：body{background:#FFF url(bg.gif) repeat-x 0}

代碼解釋：設(shè)置這個圖片為背景圖片靠網(wǎng)頁頂部水平平鋪，背景為白色。

2、不規(guī)律大圖背景

網(wǎng)頁背景是一張大圖片作為背景，寬屏和窄屏顯示器都能顯示鋪滿的全屏背景圖片。這種網(wǎng)頁首先要把背景圖片制作為最寬顯示屏分辨率寬度為2560像素或者 1920像素即可。然后設(shè)置這樣背景圖片作為body背景后需要居中。

CSS代碼：body{background: url(bg.jpg) no-repeat center 0}

代碼解釋：設(shè)置這個圖片為網(wǎng)頁背景，通常不平鋪（no-repeat），水平居中，靠上顯示。

3、背景圖按容器比例撐滿
CSS代碼：body {background-image: url(../img/bg.jpg);background-size:100%;}
這種方式設(shè)置的背景圖片的大小，寬度會鋪滿整個盒子，高度自動，超出部分會隱藏，圖片不會變形。

CSS代碼：body {background-image: url(../img/bg.jpg);background-size:100% 100%;}
這種方式設(shè)置完背景圖片的大小后，會完全鋪滿整個盒子，并且背景圖片的比例會因此改變。

4、背景圖片放大到適合元素容器的尺寸，圖片比例不變
CSS代碼：body {background-image: url(../img/bg.jpg);background-size:cover;}
把背景圖片放大到適合元素容器的尺寸，圖片比例不變，但是要注意，超出容器的部分可能會裁掉無法顯示完整背景圖像。

5、其他實(shí)用屬性

background-attachment: fixed; 圖片固定，隨著頁面滾動而移動

上一篇：學(xué)生簡單網(wǎng)頁設(shè)計中CSS背景圖片的各種屬性介紹

下一篇：DIV CSS設(shè)計網(wǎng)頁對比TABLE表格的優(yōu)勢及C...

學(xué)生網(wǎng)頁設(shè)計中常用的簡單設(shè)置網(wǎng)頁背景圖片方法

作品推薦

相關(guān)文章