【背景不準動啊啊啊!!!!】 【部落格css樣式】 背景系列-2 如何固定背景圖不隨捲軸移動

((背景系列文章))

【部落格痞客css樣式】 背景系列-1 哪裡改背景圖? 素材小圖做成連續背景?!

部落格痞客css樣式】 背景系列-2 如何固定背景圖不隨捲軸移動

【部落格痞客css樣式】 背景系列-3 如何設定背景圖位置和背景色結合應用

 

這張櫻花這個角度把他固定在頁面左上角當背景是不是很美啊!

只要在background裡加上一個字他就可以固定住唷

---------------------------------------------------------------------------------------------------------------------

 

FLO3.jpg  

上一篇有說到要改body的背景要打url(圖片網址),這次因為不要讓圖片重複排列,所以記得要打no-repeat

如果沒打no-repeat,他會變成repeat的屬性直向和橫向都重複排列唷。

((以上這裡還不熟悉的先看第一篇 哪裡改背景圖))

--------------------------------------------------------------------------------------------------------------------------------------------------------------


FLO2.jpg  

 

這個時候圖已經在背景左上角囉。

但是現在滾動捲軸圖就會移動,捲到下方就看不到上方美美的背景圖啦!

FLO4.jpg  

只要在background裡加入fixed,圖就會固定住了唷,不管捲到哪圖永遠黏在左上方唷。

 

---------------------------------------------------------------------------------------------------------------------------------

補充:

background-attachment的屬性裡,Fixed是固定住,Scroll是跟著捲軸捲動,

但是如果你沒特別標示fixed的話預設值是呈現scroll捲動的狀態。


 

ps:css樣式的規則是適用各個部落格喔!雖然是用痞客做為示範,但無名、天空等各家部落格都是一樣的^^

arrow
arrow
    全站熱搜

    鹿老師 發表在 痞客邦 留言(2) 人氣()