前提是定義了background-image屬性,而後用background-attachment來指明背景圖的位置是固定於視口的,仍是隨着包含塊移動的。可簡單理解爲定義背景圖片隨滾動軸的移動方式。css
取值:html
scroll:默認值,背景圖相對於元素固定,背景隨頁面滾動而移動,即背景和內容綁定。css3
fixed:背景圖相對於視口固定,因此隨頁面滾動背景不動,至關於背景被設置在了body上。瀏覽器
local:背景圖相對於元素內容固定,post
inhert:繼承,沒什麼說的。ui
該屬性能夠應用於任何元素。url
設置background-attachment:scroll,背景圖是相對於元素自身固定,內容動時背景圖也動。附加到元素的border。htm
localblog
Note:繼承
對於scroll,通常狀況背景隨內容滾動,可是有一種狀況例外。
對於能夠滾動的元素(設置爲overflow:scroll的元素)。當background-attachment設置爲scroll時,背景圖不會隨元素內容的滾動而滾動。
對於能夠滾動的元素(設置爲overflow:scroll的元素),設置background-attachment:local,則背景會隨內容的滾動而滾動。
由於背景圖是相對於元素自身內容定位,開始固定,元素出現滾動條後背景圖隨內容而滾動。
背景圖片相對於視口固定,就算元素有了滾動條,背景圖也不隨內容移動。
fixed用法以下:
<style> body{ background-image: url(img/cartooncat.png); background-position: bottom left; background-attachment: fixed; background-repeat: no-repeat; height: 1000px; } </style> </head> <body> <h1>下拉看效果:</h1> </body>
或者看mozilla的demo。
這裏我要強調一點個人見解:
給任何元素的背景圖設置background-attachment: fixed;效果都是同樣的,都是相對於視口,由於一個網頁只有一個視口,該背景和元素已經不要緊了,要說有關大概也只是元素不可見則背景圖不可見。
而這個視口是什麼呢?這裏推薦一篇文章《像素與瀏覽器視口的細節》
也能夠爲多個背景圖設置background-attachment
body { background-image: url("img1.png"), url("img2.png"); background-attachment: scroll, fixed; }