柏憲背景教學

2008021514:49

前些日子曾發表奇摩部落格可以放二個背景嗎 ?  以及 TINA改良式大標題背景語法解說 

為的是想套用韓網BLOG二段式背景語法..... 非常想可以直接利用美美的韓網背景!

 

一直苦於找不到解答的我,看到二度空間部落格-柏憲回應給我的語法, 簡直是美好的新年禮物 !

真不愧是css高手啊!讓我可以直接運用韓網BLOG分享二個背景,直接變成奇摩部落格可用的背景了~真是太好了 !

 

 謝謝柏憲指點教導 解決我心中特大的問號了 !

 

柏憲 是運用奇摩置頂管理區域(原來這個也可以放背景及設高度啊 !!), 讓它變成所謂HEAD頭部(不要重覆部份)背景,原先奇摩部落格背景語法, 同樣保留變成BODY身體背景(要可以重覆部份), 這樣重覆背景就不必侷限純色背景了 !

 

同樣以ROSE設計背景來說明給大家明白:

這是韓網ROSE設計原小樣參考

韓網BLOG分享的背景原素材如下(可按它會放大)

 
HEAD背景置頂不重覆部份)
+
(BODY背景下方重覆部份)

 

這是柏憲奇摩改良新語法結果效果參考 ~ 是不是很完美啊 !

(這個範例是沒有用到標題圖片背景, 若想加上去就變成3個背景了, 真妙啊 !)


 
  想要韓網BLOG二段式背景所需要的語法解說如下:      數字色碼表  http://www.massless.org/colorpicker/
 
 
這是範例用的語法提供大家分享使用(適用二欄式版面請留意)
 
管理部落格/自定樣式 所需語法如下:


    /*HEAD背景語法-置頂不重覆部份*/
#yhtw_masthead {background:url(
http://i240.photobucket.com/albums/ff40/tina88888888/001/1-rose7red-1.gif) #ffffff no-repeat;height:460px;zoom:1; filter:alpha(opacity:100);background-position:center top;}

/*BODY背景語法-重覆部份*/
body {background-color:transparent;background-image: url(
http://i240.photobucket.com/albums/ff40/tina88888888/001/2-rose7red2.gif); background-repeat: repeat;background-position: top center; zoom:1; filter:alpha(opacity:100);}


/*奇摩置頂管理語法-顏色設定*/
#yhtw_masthead .mhuser div{display:inline;color:#666666;font-size:12px;}
#yhtw_masthead .mhuser div a, #xyhtw_masthead .mhuser div b{color:#666666;}#yhtw_masthead .masthead_function{font-size:12px;position:relative;}
#yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{color:#666666;}
#yhtw_masthead .masthead_function span a{color:#666666 !important;display:block;min-width:5.5em;padding:5px 4px 3px 4px;text-decoration:none;border-bottom:solid 1px #ffffff;}
#yhtw_masthead .masthead_function span a:hover{background-color:ffffff;text-decoration:underline;}
#yhtw_masthead .masthead_function strong{font-weight:normal;color:#666666;text-decoration:underline;cursor:pointer;cursor:hand;padding-bottom:5px;}

/*奇摩標題圖語法-背景加無框*/
#yblogtitle .mbd,#yblogtitle .mft{background: url() no-repeat;}
#yblogtitle .rctop{background:url() left top no-repeat;margin-right:0px}
#yblogtitle .rctop div{background:url() right top no-repeat;height:0px;right:-0px}
#yblogtitle .rcl{background:url() repeat-y}
#yblogtitle .rcr{background:url() right repeat-y}
#yblogtitle .rcbtm {zoom:1;background:url() left bottom no-repeat;margin-right:0px}
#yblogtitle .rcbtm div {background:url() right bottom no-repeat;height:0px;right:-0px}

 
 
 
 
 
這是語法解說

/*HEAD背景語法-置頂不重覆部份*/
#yhtw_masthead {background:url(圖片1網址) #色碼 no-repeat;height:高度數字px;zoom:1; filter:alpha(opacity:100);background-position:center top;}

/*BODY背景語法-下方重覆部份*/
body {background-color:transparent;background-image: url(圖片2網址); background-repeat: repeat;background-position: top center; zoom:1; filter:alpha(opacity:100);}


/*奇摩置頂管理語法-顏色設定*/
#yhtw_masthead .mhuser div{display:inline;color:#色碼;font-size:12px;}
#yhtw_masthead .mhuser div a, #xyhtw_masthead .mhuser div b{color:#色碼;}#yhtw_masthead .masthead_function{font-size:12px;position:relative;}
#yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{color:#色碼;}
#yhtw_masthead .masthead_function span a{color:#色碼 !important;display:block;min-width:5.5em;padding:5px 4px 3px 4px;text-decoration:none;border-bottom:solid 1px #色碼;}
#yhtw_masthead .masthead_function span a:hover{background-color:#色碼;text-decoration:underline;}
#yhtw_masthead .masthead_function strong{font-weight:normal;color:#色碼;text-decoration:underline;cursor:pointer;cursor:hand;padding-bottom:5px;}

/*奇摩標題圖語法-背景加無框*/
#yblogtitle .mbd,#yblogtitle .mft{background: url(無或圖片3網址) no-repeat;}
#yblogtitle .rctop{background:url() left top no-repeat;margin-right:0px}
#yblogtitle .rctop div{background:url() right top no-repeat;height:0px;right:-0px}
#yblogtitle .rcl{background:url() repeat-y}
#yblogtitle .rcr{background:url() right repeat-y}
#yblogtitle .rcbtm {zoom:1;background:url() left bottom no-repeat;margin-right:0px}
#yblogtitle .rcbtm div {background:url() right bottom no-repeat;height:0px;right:-0px}

 

本文出自 Tina~小小世界  http://tw.myblog.yahoo.com/tina88888888-babytony/