用CSS控制背景圖像

  • 2019-12-27 15:44:20
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來源:http://www.258852.net

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

定義背景圖片

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

background-image: url;

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

【示例1】啟動Dreamweaver,新建一個網頁,保存為test.html,輸入以下內容:

<!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所示。其在網頁中平鋪的效果如圖9.86所示。

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

1.jpg


2.jpg

【示例2】啟動Dreamweaver,新建一個網頁,保存為test1.html,輸入以下內容:

<!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>

其顯示結果可以看到淡綠色的背景顏色和背景圖片同時顯示在網頁中。

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

當前URL:http://www.258852.net/news/wzzz/3150.html

上一篇:Banner實例展示

下一篇:網頁設計中背景圖片的重復

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
a级国产乱理论片在线观看_久久久久久黃色網站免費_日韩 欧美 一区 不卡_国产成人av综合网