DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> 網頁背景圖固定不動,不跟隨滾動條滾動
網頁背景圖固定不動,不跟隨滾動條滾動
編輯:WEB前端代碼     
我們在做網頁的時候,當背景是一張完整的圖片,不動讓其跟隨滾動條滾動,怎麼辦?下面詳細講解一下。

CSS代碼示例-背景顏色屬性(background-color)

<html> <head> <title>背景顏色 background-color</title> <style type="text/css"> body {background-color:#99FF00;} </style> </head>

<body> <p>這個HTML使用了CSS的background-color屬性,將HTML的背景顏色變成翠綠色。<p> </body> </html>

演示結果: 這個HTML使用了CSS的background-color屬性,將HTML的背景顏色變成翠綠色。
CSS代碼示例-背景圖片屬性(background-image)

<html> <head><title>背景圖片background-image</title></head>

<body style="background-image:url(../images/css_tutorials/background.jpg)"> <p>這個HTML使用了CSS的background-image屬性,設置了背景圖片。<p> </body> </html>

演示結果: 這個HTML使用了CSS的background-image屬性,設置了背景圖片。
CSS代碼示例- 背景重復屬性(background-repeat)

<html> <head> <title>背景重復 background-repeat</title> <style type="text/css"> body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y} </style> </head>

<body> <p>這個HTML使用了CSS的background-repeat屬性,使背景圖片豎向重復。<p> <p>常用的background-repeat的屬性值有: repeat-x(橫向重復),repeat-x(橫向重復), no-repeat(不重復)。</p> <p>background-repeat屬性要和background-image一起用。</p> </body> </html>

演示結果: 這個HTML使用了CSS的background-repeat屬性,使背景圖片豎向重復。 常用的background-repeat的屬性值有: repeat-x(橫向重復),repeat-x(橫向重復), no-repeat(不重復)。 background-repeat屬性要和background-image一起用。



CSS代碼示例-背景附著屬性(background-attachment)

<html> <head> <title>背景附著屬性 background-attachment</title> <style type="text/css"> body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed} </style> </head>

<body> <p>這個HTML使用了CSS的background-attachment屬性,將背景圖片固定,不隨內容滾動而滾動。<p> <p>背景附著(background-attachment)屬性有兩個值。一個是scroll,表示隨內容滾動而動;一個是fixed,表示固定不動,不受內容滾動影響。缺省值是scroll。</p> <p>background-attachment要和background-image一起用。</p>

</body> </html>

演示結果: 這個HTML使用了CSS的background-attachment屬性,將背景圖片固定,不隨內容滾動而滾動。

背景附著(background-attachment)屬性有兩個值。一個是scroll,表示隨內容滾動而動;一個是fixed,表示固定不動,不受內容滾動影響。缺省值是scroll。

background-attachment要和background-image一起用。

這個HTML使用了CSS的background-attachment屬性,將背景圖片固定,不隨內容滾動而滾動。

背景附著(background-attachment)屬性有兩個值。一個是scroll,表示隨內容滾動而動;一個是fixed,表示固定不動,不受內容滾動影響。缺省值是scroll。

CSS代碼示例-背景位置屬性(background-position)

<html> <head> <title>背景位置屬性 background-position</title> <style type="text/css"> body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px} </style> </head> <body> <p>這個HTML使用了CSS的background-position屬性。這個屬性和background-image屬性連在一起使用,決定了背景圖片的最初位置。</p> <p>上面的代碼表示背景圖片的初始位置距離網頁最左面20px,距離網頁最上面60px。</p> </body> </html>

演示結果: 這個HTML使用了CSS的background-position屬性。這個屬性和background-image屬性連在一起使用,決定了背景圖片的最初位置。

上面的代碼表示背景圖片的初始位置距離網頁最左面20px,距離網頁最上面60px。



CSS代碼示例-背景屬性(background)

<html> <head> <title>背景屬性 background</title> <style type="text/css"> body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px} </style> </head>

<body> <p>這個屬性是設置背景相關屬性的一種快捷的綜合寫法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。</p> <p>這個HTML所用的背景屬性表示,網頁的背景顏色是翠綠色,背景圖片是background.jpg圖片,背景圖片不重復顯示,背景圖片不隨內容滾動而動,背景圖片距離網頁最左面40px,距離網頁最上面100px。</p>



</body> </html>

演示結果: 這個屬性是設置背景相關屬性的一種快捷的綜合寫法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。

這個HTML所用的背景屬性表示,網頁的背景顏色是翠綠色,背景圖片是background.jpg圖片,背景圖片不重復顯示,背景圖片不隨內容滾動而動,背景圖片距離網頁最左面40px,距離網頁最上面100px。

這個屬性是設置背景相關屬性的一種快捷的綜合寫法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved