css設(shè)置body背景圖片隨內(nèi)容增加多少

2024-07-11 09:01:21

字體：大中小

供稿：網(wǎng)友

在CSS布局時，可能有時會遇到對body直接設(shè)置圖片作為網(wǎng)頁背景水平縱向平鋪（從上到下居中平鋪），此時整個網(wǎng)頁無論內(nèi)容是否占滿一屏幕，css背景都會從上到下鋪（縱向）滿整個屏幕。但有時我們不需要這樣的一個效果，需要內(nèi)容占用多高，body背景就縱向從上到下鋪滿多少高度。很明顯這樣就達(dá)不到我們想要的效果。

解決方法：對html再設(shè)置個背景（無論圖片還是純色，推薦設(shè)置純顏色的背景顏色）

接下來DIVCSS5通過實例為大家介紹此技巧，首先DIVCSS5分為兩個案例，一個是直接對body設(shè)置背景圖片從上到下平鋪，我們會觀察到無論網(wǎng)頁內(nèi)容是否占滿一屏幕，背景都會從上到下滿鋪。

一、未解決背景縱向平鋪CSS DIV案例 - TOP

1、DIV CSS案例描述首先對body設(shè)置一個背景圖片（bg.gif）從上到下平鋪，設(shè)置一個div盒子寬度為274px,高度為200px;div背景顏色為藍(lán)色。

2、案例HTML源代碼：

<!DOCTYPE html>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>

CSS案例

在線演示 DIVCSS5</title>

<linkhref="images/style.css"rel="stylesheet"type="text/css"/>

</head>

<body>

<divclass="divbox">DIVCSS5實例內(nèi)容</div>

</body>

</html>

3、案例CSS代碼：

@charset "utf-8";

/* DIVCSS5-CSS初始化模板-www.divcss5.com */

body, div {margin:0; padding:0;font-style: normal;font:12px/22px "5B8B4F53",Arial, Helvetica, sans-serif}

/* 5B8B4F53 代表宋體，更多中文字體轉(zhuǎn) Unicode http://www.divcss5.com/jiqiao/j325.shtml */

ol, ul ,li{list-style:none}

body{color:#FFF;

background

:#E2E2E2 url(bg.gif) repeat-y center 0; text-align:center}

.divbox{ margin:0 auto; width:274px; height:200px; background:#00F}

4、實例截圖

對body設(shè)置縱向平鋪背景圖片顯示案例截圖

從以上圖上看到對body設(shè)置背景圖片從上到下縱向平鋪時，無論內(nèi)容是否占滿1屏幕，其背景都會從上到下都會平鋪滿整個屏幕，此時就不那么好看了，接下來第二個案例在此基礎(chǔ)上進(jìn)行解決背景隨內(nèi)容占用多個顯示多個平鋪圖片背景。

5、在線演示：查看案例

二、解決內(nèi)容多高body設(shè)置背景圖片平鋪顯示多高 - TOP

1、解決說明我們只需要在CSS代碼中對html加一個背景色即可，當(dāng)然這個背景設(shè)置需要根據(jù)布局實際情況而設(shè)置，這里因為背景顏色為“#E2E2E2”，此時我們就只需要對html設(shè)置一個CSS背景色為“#E2E2E2”即可解決實現(xiàn)完美背景圖片縱向從上到下平鋪問題。

2、CSS代碼：

@charset "utf-8";

/* DIVCSS5-CSS初始化模板-www.divcss5.com */

body, div {margin:0; padding:0;font-style: normal;font:12px/22px "5B8B4F53",Arial, Helvetica, sans-serif}

/* 5B8B4F53 代表宋體，更多中文字體轉(zhuǎn) Unicode http://www.divcss5.com/jiqiao/j325.shtml */

ol, ul ,li{list-style:none}

html{background:#E2E2E2}/*

CSS注釋

說明：對html設(shè)置背景顏色 */

body{color:#FFF;background:#E2E2E2 url(bg.gif) repeat-y center 0; text-align:center}

.divbox{ margin:0 auto; width:274px; height:200px; background:#00F}

3、案例截圖