用CSS控制背景圖像

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

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

定義背景圖片

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

background-image: url;

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

【示例1】啟動Dreamweaver,新建一個網(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>

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

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

1.jpg


2.jpg

【示例2】啟動Dreamweaver,新建一個網(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é)果可以看到淡綠色的背景顏色和背景圖片同時顯示在網(wǎng)頁中。

當前文章標題:用CSS控制背景圖像

當前URL:http://m.supportcoffeeroasters.com/news/wzzz/3150.html

上一篇:Banner實例展示

下一篇:網(wǎng)頁設計中背景圖片的重復

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