CSS background-attachment 背景圖片是否隨滑鼠滾動

CSS background-attachment 屬性用來控制網頁本身的背景圖片，是否要隨滑鼠上下滾動而滾動，background-attachment 屬性就兩個重要的參數（屬性值），分別是預設的 scroll 以及非預設的 fixed，其中 scroll 代表網頁背景圖片會隨著滑鼠上下滾動網頁而跟著滾動，就像是背景圖片與網頁本身是連在一起的，而 fixed 則會讓網頁背景圖片固定不動，當滑鼠上下滾動網頁時，背景圖片不會受影響，這就是 background-attachment 屬性的主要功能，平常用到的瀏覽器幾乎都支援這個效果。

CSS background-attachment 屬性語法規則

background-attachment:參數值;

其中參數值有 scroll 及 fixed 兩種可以選擇，效果誠如第一段所述。

background-attachment:scroll; //網頁背景圖片會跟著上下移動。
background-attachment:fixed; //網頁背景圖片會固定不動，與網頁主體分開。

通常 background-attachment 都會與 background-image 背景圖片屬性搭配在一起設計，畢竟用來控制背景圖片效果的功能，當然少不了插入一張背景圖片到網頁中囉！來看個簡單的範例。

CSS background-attachment 屬性範例

body{
　background-image:url(圖片網址); //插入背景圖片
　background-attachment:scroll; //背景圖片不影響
}

這個範例其實蠻簡單的，就是在 CSS 的 body 設計區內，先透過 background-image 插入一張網頁背景圖片，接著再用 background-attachment 來規定這張背景圖片必須用預設的 scroll 參數值，當網友在瀏覽網頁的時候，隨著網友瀏覽網頁的動作，背景圖片就跟著網頁一起上下被拉動，因為 scroll 是預設值，以這段範例來說，整段「background-attachment:scroll;」不寫出來都沒有差別，但如果要使用 fixed 參數值可就不一樣囉！不寫出來會完全無法顯示效果。

重點提示一下，background-image 通常要寫在前面，接著才能寫 background-attachment，否則在部分的瀏覽器會無法判斷，為了避免這些不同瀏覽器（browser）的問題，最好的辦法就是自己養成良好的習慣。

延伸閱讀