固定背景圖片及位置:光光 Blog:Xuite日誌
  • 最新文章
  • 文章分類
  • CSS/HTML應用筆記
  • 線上應用工具
  • 我的發燒文
  • 累積 | 今日
    loading......
  • 最新回應
  • Re:更改 繼續閱讀 顏色,by(光光)於2008-10-08
    Re:基本連結語法,by(光光)於2008-10-08
    Re:留幾枚柿子在樹上吧 ,by(光光)於2008-10-08
    Re:3分鐘製作一張會「動」的圖片,by(光光)於2008-10-08
    Re:基本連結語法,by(Jane)於2008-10-08
    Re:留幾枚柿子在樹上吧 ,by(如芯)於2008-10-07
    Re:更改 繼續閱讀 顏色,by(熊伯)於2008-10-07
    Re:3分鐘製作一張會「動」的圖片,by(kscpethome)於2008-10-07
    Re:更改 繼續閱讀 顏色,by(光光)於2008-10-06
    Re:更改 繼續閱讀 顏色,by(熊伯)於2008-10-04
    Re:隱藏 加入最愛 圖示,by(熊伯)於2008-10-04
    Re:浪漫玫瑰花分隔線,by(光光)於2008-10-03
    Re:浪漫玫瑰花分隔線,by(塗鴉鴉)於2008-10-03
    Re:韓式美麗分隔線-2,by(喵)於2008-10-02
    Re:精選~迪士尼~卡通變幻動圖,by(小秋)於2008-10-02
  • 最愛連結
  • 光光的五四三




  • ◎ 歡迎蒞臨 ◎
    請自由取用素材
    版權屬原創所有
    請勿做商業用途
    祝大家平安快樂




    光光Blog~首頁

    台灣部落格列表


    website counter
  • 參觀人氣統計
  • 廣告作公益
  • 誰拜訪過我
  • 光光
  • 搜尋文章
  • 關鍵字
    2007-09-14 22:35 固定背景圖片及位置
  • ?
  • CSS/HTML應用
  • 好文轉寄
  • 平均分數:0 顆星    投票人數:0
    我要評分:
    標籤 : 


    進入管理後台面板管理自定樣式(css)

     找到 /*主體*/語法標籤,下面有↓

    body{ 
        margin:0px 0px 0px 0px;
        text-align: center;
     /*background-image:url(底圖網址);*/

      background-image:url(底圖網址);
     background-attachment:fixed;
     background-repeat:no-repeat;
     background-position: center top;
     
    }

    將原本的background-image:url...Mark掉!然後新加入紅色語法

     background-image:url(底圖網址);  背景圖網址
     background-attachment:fixed;         ←背景圖不捲動  (scroll捲動)
     background-repeat:no-repeat;          不重複排列
     background-position: center top;    位置 (請參考以下說明)

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

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

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

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

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

    background-position:    位置,參數有↓ 
                            top left;     (左上)
                            top center;   (中上)
                            top right;    (右上)
                            center left;  (中左)
                            center center;(中中)
                            center right; (中右)
                            bottom left;  (左下)
                            bottom center;(中下)
                            bottom right; (右下)



    光光 / Xuite日誌 / 回應(2) / 引用(1) / 好文轉寄
  • 回應