close

 







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


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


 


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


真不愧是ｃｓｓ高手啊！讓我可以直接運用韓網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; }



/*奇摩置頂管理語法－顏色設定*/
#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; }




/*奇摩置頂管理語法－顏色設定*/
#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



arrow
arrow
    全站熱搜
    創作者介紹
    創作者 笑咪咪 的頭像
    笑咪咪

    笑咪咪的部落格

    笑咪咪 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄