css透明標題,邊框消失,欄位邊框及回應欄設置(28/07/2009整理)

 以下css語法可弄可不弄,因為大家看了我blog那麼久,

基本css設定巳懂得,以下有興趣的,可以再作增加.

祝各位使用稱心滿意

範例圖解

1A.  把中間及最濶的自定欄位標題弄至透明看不見背景圖

.col-600 .rc_bd .rc_bc .hd .titlebar,
.row-760 .rc_bd .rc_bc .hd .titlebar,
.row-920 .rc_bd .rc_bc .hd .titlebar
{background:url(http://i524.photobucket.com/albums/cc321/HelloMissYam/928b29995ab9.gif);}

http://i524.photobucket.com/albums/cc321/HelloMissYam/928b29995ab9.gif 是一幅透明圖片,

秘訣便是這幅透明圖片 (size: 134 x 180 像素)

透明圖樣子是........ 怎解說好呢~    呵呵

我把那圖(紅圈)另存圖片放入電腦.

後來我才醒起,有方法更簡單,

又或者用最簡單方法 transparent 表示透明

.col-600 .rc_bd .rc_bc .hd .titlebar,
.row-760 .rc_bd .rc_bc .hd .titlebar,
.row-920 .rc_bd .rc_bc .hd .titlebar
{background:transparent;}

1B. 左右150窄欄位標題弄至透明 transparent ,沒有用背景圖

.col-150 .rc_bd .rc_bc .hd .titlebar .hd,
.col-150 .rc_bd .rc_bc .hd .titlebar
{background:transparent;}

2. 把所有欄位邊框,文章的邊框弄至消失

.rc div{background:none;}
.rc_ft div{background:none;}
.rc_bd div.rc_bc{background:none;}
.rc_bd{background:none;}
.rc{background:none;}
.rc_ft{background:none;}
#blast .rc_ft{background:none;}
#blast .rc_ft div{background:none;}
#friendlist_module .rc div{background:none;}
#friendlist_module .rc_bc{background:none;}
#friendlist_module .rc_ft div{background:none;}
#friendlist_module .rc_bd{background:none;}
#friendlist_module .rc{background:none;}
#friendlist_module .rc_ft{background:none;}
#mod-friend-list-all .rc_bc{background:#E4EDF1;}
#mod-friend-list-all .rc div{background:none;}
#mod-friend-list-all .rc_bd{background:none;}
#mod-friend-list-all .rc{background:none;}
#mod-friend-list-all .rc_ft div{background:none;}
#mod-friend-list-all .rc_ft{background:none;}
#subscribe_highlight .rc {background:none;}
#subscribe_highlight .rc div{background:none;}
#subscribe_highlight .rc_bc {background:none;}
#subscribe_highlight .rc_bd {background:none;}
#subscribe_highlight .rc_ft {background:none;}
#subscribe_highlight .rc_ft div{background:none;}
#mod-tagged-frd-article .rc {background:none;}
#mod-tagged-frd-article .rc div{background:none;}
#mod-tagged-frd-article .rc_bc {background:none;}
#mod-tagged-frd-article .rc_bd {background:none;}
#mod-tagged-frd-article .rc_ft {background:none;}
#mod-tagged-frd-article .rc_ft div{background:none;}

第 3,4,5,6 項圖解(為了方便容易令各位明白,我用了強烈的對比顏色

3.回應欄的外圍邊(目前我使用粉紅色)加上顏色

.cmt-mod-alist #comments-listing .extend-hd, .cmt-mod-alist #comments-listing .extend-bd .alist-comment{background-color:#FACBCB;}

4.回應欄的內圍邊(目前我使用紫色)加上顏色

.mod-alist-full .alist-comment ul{background-color:#6E0576;}

5.回應欄的內文背景色(目前我使用綠色)加上顏色

.cmt-mod-alist .alist-comment li{background-color:#07F60F;}

6.回應欄的內文背景圖(目前我使用了紅心)

.mod-alist-full .alist-comment .comment-ctnr{background:#FFFFFF url(http://i524.photobucket.com/albums/cc321/HelloMissYam/7ded054ebd38.jpg);}

今天我在想既然改變了回應欄四週底色,那插入圖片也可能得嘅,

試試下又真係得咗, 以下便是成功例子了.

得咗的心情真係好開心, 又好有成功感. 

(29/12/2008更新以下語法)

.cmt-mod-alist #comments-listing .extend-hd, .cmt-mod-alist #comments-listing .extend-bd .alist-comment{background-image:url(http://a120.loxa.edu.tw/image/material/back/back_021.gif);}

如果想弄成透視效果背景改為這語法. {background:transparent;}

.mod-alist-full .alist-comment ul{background-image:url(http://img217.imageshack.us/img217/1157/5925048259767533621da4.gif);}

如果想弄成透視效果背景改為這語法. {background:transparent;}

.cmt-mod-alist .alist-comment li{background-image:url(http://i452.photobucket.com/albums/qq247/amy369699/20317_cola71a.gif?t=1226807349);}

這回應欄我未試過能改成透明,想試試的可以套用 TRANSPARENT透明試試.

如果使用這一組: 便去刪除原先曾設定的這一句,以不用了.

6.回應欄的內文背景圖(目前我使用了紅心)

.mod-alist-full .alist-comment .comment-ctnr{background: url(http://s39.radikal.ru/i085/0811/7e/7ded054ebd38.jpg);}

Rose 在28/07/2009 加強說明:

回應欄全透明,唔要任何背景,留意下面所講:

{background: url(url linkl圖址);} 

有背景圖 link 全部改為

 {background:transparent;}

就這麽簡單.

 延伸閱讀:   

Rose Garden 不斷更新css教學,所以請注意常溜覽 BLOG 設置

http://hk.myblog.yahoo.com/jw!KvO.Ua6RGAXja05ehum1DZyf4_OotV3N73rIUVri/index?l=f&id=28

歡迎光臨這篇文章, 為你送上優美樂章

 伸延閱讀:  分享及設定透明標題圖 (有透明標題圖提供)

如遇到 Blog 美化設置上問題, 請到 Blog Q&A 問題專版 公開發問

以便讓更多朋友得以學習。因此，對於 私人提問，恕不會作答。