blog更新背景語法

2010030400:27

［更新教學］各區域背景圖

分類：CSS 設定
2007/07/19 21:39

※最新文章背景圖

連結部分插入圖檔網址，橘色部分為標題文字(最新文章、部落格連播)的顏色

圖檔網址=在你想用的圖片上點右鍵選擇內容複製網址(URL) 

本文最下方有色碼表可參考

以下是語法

/*Main content header*/
.yc3pribd .mhd{ background:url(http://xxxx.gif) repeat; color:#FBF2CA;}

 

※招呼語背景圖

連結部分插入圖檔網址，紅色部分字體為背景圖是否重複

如果使用整張的招呼語底圖可以不用管他，如果使用小圖示需要重複就把no-拿掉即可

以下是語法

/*Opacity for blast招呼語圖框文字置中*/
#yblast{zoom:1;position:relative;top:-20px;left:0px;margin:0 0 -55px 0;z-index:2;}#yblast .text,#yblast .bg{overflow:hidden;padding:5px 5px;width:555px;height:70px;}#yblast .text{zoom:1;margin:-55px 0 0;}#yblast .text a#yblast a.edit{background:url(http://xxxx.gif);width:13px;height:13px;}#yblast .bg {zoom:1; filter:alpha(opacity:100); background: url(http://xxxx.gif) no-repeat}#yblast .text{color:#2D328D;font-size:90%;} 

 

※背景固定

連結部分插入圖檔網址，如果使用一整張大張的背景圖紫色部分可以不管他

如果使用小張的背景圖需要重複才有背景效果的，就把no-拿掉即可

紅色部分說明：
backgroud-position: 0% 0%; 左邊上方
backgroud-position: 0% 50%; 左邊中間
backgroud-position: 50% 0%; 中間上方
backgroud-position: 50% 50%; 正中間
backgroud-position:100% 0%; 右邊上方
backgroud-position: 0% 100%; 左邊下方
backgroud-position: 100% 50%; 右邊中間
backgroud-position: 50% 100%; 中間下方
backgroud-position: 100% 100%; 右邊下方

以下是語法

body {
background-image: url(http://xxxx.gif);
background-repeat:no-repeat ;
background-position :0% 100%;
background-attachment: fixed;}

 

※文章背景

連結部分插入圖檔網址

以下是語法

/*Main content body*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{
background-image:url(http://xxxx.gif);
color:#1A4066} #ymodcal .mbd td strong {color:#3B9DC1;}

 

※左右側欄位標題圖

連結部分插入圖檔網址，紫色部分為標題原本底色，紅色部分為標題字體顏色

以下是語法

/*Nav module header*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#FBF2CA;  color:#90620E; background-image:url(http://xxxx.gif);}
#ymodcal .mbd td strong {color:#DD1D27;}

※左右側欄位內容底圖

連結部分插入圖檔網址，紅色部分為內容字體顏色

以下是語法

/*Nav module body*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background: #FFFFFF;background-image: url(http://xxxx.gif);color:#FF0000}

 

※頂端控制列背景

連結部分插入圖檔網址，紅色部分為更換文字顏色，紫色部分為調整透明度，數字越小越透明

以下是語法

/*Master header*/
#yhtw_masthead{background-image: url(http://sheng.phy.nknu.edu.tw/back060098.gif);color:#000080;filter:alpha(opacity=50); opacity:0.30; moz-opacity:0.5;}
#yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{color:#000080;}

 

※部落格標題背景

連結部分插入圖檔網址，紅色部分為部落格介紹文字顏色，紫色部分為部落格標題顏色

語法如下 
/*Blog title*/
#yblogtitle .mbd,#yblogtitle .mft{background: url(http://xxxx.gif) repeat; color:#000000; }
#yblogtitle h1{color:#000000; font-weight:bold;}  

 

上一篇

英國水彩畫家約翰雅德利作品欣賞

下一篇

［教學］各區域標題更換為圖示

相關文章

我要留言