用CSS控制背景圖像

  • 2019-12-27 15:44:20
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.iy5y368.cn

網(wǎng)頁設(shè)計(jì)時(shí),CSS可設(shè)置背景圖片的樣式。任何一個(gè)頁面,都有它的背景色或背景圖來突出其基調(diào),本節(jié)將通過實(shí)例介紹背景圖片的樣式設(shè)置。

定義背景圖片

CSS使用background-image屬性來定義背景圖片樣式,在網(wǎng)站建設(shè)時(shí),該屬性用法如下:

background-image: url;

其作用是給頁面添加背景圖片,其中url是圖片的路徑,可以是絕對路徑,也可以是相對路徑。導(dǎo)入的圖片其默認(rèn)屬性是在橫向和縱向上重復(fù),如果不希望重復(fù),則需要設(shè)置no-repeat屬性,其具體用法會在下面講到。

【示例1】啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁,保存為test.html,輸入以下內(nèi)容:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<title>背景圖片</title>

<style>body { background-image: url(images/bg.jpg);     /*頁面背景圖片*/ }

</style>

</head>

<body>

</body>

</html>

以上代碼中,圖片默認(rèn)會在橫向和縱向上重復(fù),本例中圖片的原型如圖9.85所示。其在網(wǎng)頁中平鋪的效果如圖9.86所示。

如果在設(shè)計(jì)網(wǎng)頁時(shí)使用的背景圖片是GIF格式的透明圖片,那么此時(shí)如果再設(shè)置網(wǎng)頁的背景顏色background-color,則背景圖片和背景顏色將同時(shí)生效。

1.jpg


2.jpg

【示例2】啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁,保存為test1.html,輸入以下內(nèi)容:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<title>背景圖片</title><style>body {

background-image: url(images/bg1.gif); /*頁面背景圖片*/    

background-color: #A7D3A0;             /*頁面背景顏色*/}

</style>

</head>

<body>

</body>

</html>

其顯示結(jié)果可以看到淡綠色的背景顏色和背景圖片同時(shí)顯示在網(wǎng)頁中。

當(dāng)前文章標(biāo)題:用CSS控制背景圖像

當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/3150.html

上一篇:Banner實(shí)例展示

下一篇:網(wǎng)頁設(shè)計(jì)中背景圖片的重復(fù)

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號)