婚享同學會


可用已有生活易帳號

登入


未有生活易帳號?

立即註冊

興趣圈子 - 自定wow 個人主頁風格

  • 放置 banner 圖片

    anniNeko 2009-02-25 21:37
    根據 TerenceC 的例子,分享一下 banner 圖片的設定。
    Banner 位置是比教容易處理,而且不容易形響 content,所以由這 part 說起吧。


    例 #1

    .headerwarp {
            width: 950px;
            height: 300px;
            background-image: url(http://wow.esdlife.com/attachment/200902/16/1003_123480041827Ju.jpg);
            background-repeat: no-repeat;
            background-position: 50% 51px;
    }


    解說:

    height: 300px; <- 圖片的高度


    background-image: url(http://wow.esdlife.com/attachment/200902/16/1003_123480041827Ju.jpg); <-這裡用作設定上方背景圖片。


    background-repeat: no-repeat; <- 這是背景圖片的重覆設定,稍後會有其他例子。


    background-position: 50% 51px; <- 第一個數值是圖片在左邊哪個位置開始;50% 是設定圖片置中,稍後會有其他例子。


    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    例 #2


    .headerwarp {
    width: 950px;
            height: 300px;
            background-image: url(http://wow.esdlife.com/attachment/200902/16/1003_123480041827Ju.jpg);
            background-repeat: no-repeat;
            background-position: 0% 51px;
    }


    解說:

    background-position: 0% 51px; <- 第一個數值是圖片在左邊哪個位置開始;0% 是設定圖片置左,如此類推...


    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    例 #3


    .headerwarp {

    width: 950px;
            height: 300px;
            background-image: url(http://wow.esdlife.com/attachment/200902/16/1003_123480041827Ju.jpg); background-repeat: repeat-x;
            background-position: 0% 51px;
    }


    解說:

    background-repeat: repeat-x; <- repeat-x 代表向橫重覆




    今日講住咁多先~
    若有疑難,請提出來吧

  • #1
    florence 2009-02-25 22:55
    wow, thanks for sharing!!!
  • #2
    9X 久城 2009-02-26 17:36
    唔該晒呀!  試下玩先~
  • #3
    nikoko 2009-02-27 00:22
    wah@~太好喇!多謝你既分享! 等我研究下點整我個版版先!
  • #4
    貝仔 2009-03-20 21:34
    um... 請問係唔係upload咗張jpeg晌自己相簿, 再copy條link去cover晌url後面? 唔知點解我copy完之後只有一片空白......
  • #5
    anniNeko 2009-03-21 09:52
    貝仔: um... 請問係唔係upload咗張jpeg晌自己相簿, 再copy條link去cover晌url後面? 唔知點解我copy完之後只有一片空白......
    首先,判斷下幅相是否 ok。
    在瀏覽器的網址欄打上你的照片的 link,看看能否把圖片 load 出來。

    如果圖片正常,不如 post 你的 css 出來,大家一起研究吧
  • #6
    貝仔 2009-03-23 12:24
    anniNeko: 首先,判斷下幅相是否 ok。
    在瀏覽器的網址欄打上你的照片的 link,看看能否把圖片 load 出來。

    如果圖片正常,不如 post 你的 css 出來,大家一起研究吧
    搞掂啦, 唔該哂! 原來因為我之前copy錯咗, 所以咩都無!
  • #7
    貝仔 2009-03-23 15:48
    另外我想問, 可唔可以加底色晌banner後架呢?
  • #9
    貝仔 2009-03-23 22:42
    anniNeko: 當然可以~加上這句便可以了
    background-color: lavender;

    例子:
    .headerwarp {
            width: 950px;
            height: 300px;
            background-im
    唔該哂~!
  • #10
    anniNeko 2009-03-24 02:09
    貝仔: 唔該哂~!
    加油~
  • #11
    Maggggiii 2009-05-18 12:10
    really thanksssssss
    just want to polish my blogggggggg!!
  • #12
    anniNeko 2009-05-18 22:00
    Maggggiii: really thanksssssss
    just want to polish my blogggggggg!!
    加油~~~
  • #13
    首領 2009-06-03 15:10
    anniNeko: 加油~~~
    唔得呀...點樣可以低d呀?
  • #14
    anniNeko 2009-06-03 21:35
    首領: 唔得呀...點樣可以低d呀?
    如果要調低d, 要同時改2個數:

    例如: 調低 100px
    1. 將 height: 300px; 改成 height: 400px;
    2. 將 background-position: 50% 51px; 改成 background-position: 50% 151px;

    例子:
    .headerwarp {
            width: 950px;
            height: 400px;
            background-image: url(http://wow.esdlife.com/attachment/200902/16/1003_123480041827Ju.jpg);
            background-repeat: no-repeat;
            background-position: 50% 151px;
    }
你還不是該小圈子正式成員,不能參與討論。 現在就加入