固定背景圖片及位置

引用:http://tw.myblog.yahoo.com/jw!ogMHya.TEhDCHs5gRw--/article?mid=12&prev=13&next=10&l=a&fid=11 

蠻常見到有人問說,要如何才能讓背景圖片不管捲軸拉到那邊都不會變?這其實只要透過設定background-attachment就能達到該效果了。

Body其實並不用做任何設定,這邊我為了讓網頁有捲軸,所以在pre包起一段話:

接著來看CSS中的語法:

只要把background-attachment設成fixed就能固定背景圖片了。若是要取消固定的話,只要把background-attachment拿掉或是設成none就行了。而其中的background-repeat設成no-repeat是避免當背景圖片太小張時,讓它不要重覆的顯示。

還有另一種常見的情況是,背景圖片本身就只是小小張的,但想讓它固定在網頁的某一位置的話,我們除了用background-attachment之外,還要搭配background-position來一起使用。

Body一樣不變,直接看CSS的部份:

background-position值的設定可用數字加單位、數字加百分比或是使用關鍵字。background-position基本上需要兩各值,第一個是距離左邊界的值,另一個則是距離上邊界的值。但是若是要在中間的話,可以設一個center就可以了,另一個若沒有的話,會自動認為也是center。

background-position位置的相對關係可以參考下面的圖解。

怎樣~是不是很簡單呢!

範例瀏覽:

   http://abgne.myweb.hinet.net/CSS/0001/0001_1.html

   http://abgne.myweb.hinet.net/CSS/0001/0001_2.html