[取消]
[應用]
拖動可重置相片
興趣圈子 -
自定wow 個人主頁風格
-
根據 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 代表向橫重覆
今日講住咁多先~
若有疑難，請提出來吧
-
wow, thanks for sharing!!!
-
唔該晒呀! 試下玩先~
-
wah@~太好喇!多謝你既分享! 等我研究下點整我個版版先!
-
um... 請問係唔係upload咗張jpeg晌自己相簿, 再copy條link去cover晌url後面? 唔知點解我copy完之後只有一片空白......
-
貝仔: um... 請問係唔係upload咗張jpeg晌自己相簿, 再copy條link去cover晌url後面? 唔知點解我copy完之後只有一片空白......首先，判斷下幅相是否 ok。
在瀏覽器的網址欄打上你的照片的 link，看看能否把圖片 load 出來。
如果圖片正常，不如 post 你的 css 出來，大家一起研究吧
-
anniNeko: 首先，判斷下幅相是否 ok。搞掂啦, 唔該哂! 原來因為我之前copy錯咗, 所以咩都無!
在瀏覽器的網址欄打上你的照片的 link，看看能否把圖片 load 出來。
如果圖片正常，不如 post 你的 css 出來，大家一起研究吧
-
另外我想問, 可唔可以加底色晌banner後架呢?
-
貝仔: 另外我想問, 可唔可以加底色晌banner後架呢?當然可以~
加上這句便可以了
background-color: lavender;
例子:
.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;
background-color: lavender;
}
至於顏色，可參考舊 post加油~~
http://wow.esdlife.com/space.php?uid=1003&do=thread&id=119[本話題由 anniNeko 於 2009-03-23 22:01:28 編輯]
-
anniNeko: 當然可以~唔該哂~!加上這句便可以了
background-color: lavender;
例子:
.headerwarp {
width: 950px;
height: 300px;
background-im
-
貝仔: 唔該哂~!加油~
-
really thanksssssss
just want to polish my blogggggggg!!
-
Maggggiii: really thanksssssss加油~~~
just want to polish my blogggggggg!!
-
anniNeko: 加油~~~唔得呀...點樣可以低d呀?
-
首領: 唔得呀...點樣可以低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;
}
「優質婚禮商戶」計劃 
