[轉貼自]http://blog.xuite.net/jeanson61/xuite/279149
使用CSS修改版面成為透明狀效果
這兩天有空都在試CSS的修改，將Blog版面除了底圖修改以外，將版面上各欄位的部份做一些修改嘗試，想製造一些透明的效果。(因為記得以前有Xuiter問過，我已經不記得是誰了)。在看這一篇前，各位可以先看看結果：http://blog.xuite.net/jeanson61/test2，我保留文章主體的部份有背景的白色框底，其他各個欄位就讓它們變透明的。
在講下去以前，還是先將相關以前的文章也列出，避免部份Xuiters沒看過以前的文章，會有進入障礙！所以以前的文章有：
>談自訂CSS前的準備、
※貼圖來測試改網頁底圖、
※提供一些可做為底圖的圖片>自定CSS將Blog底圖換掉、
※自定CSS將Blog底圖換掉之補充說明(將Blog的底圖換成自己想要的)
※進階的CSS修改推薦文章(將Blog的版面改的更澈底)
※進階研究Xuite CSS第二篇by Shuhua推薦
如果已經有CSS概念了，那我們就來談談透明效果要怎麼做。要有透明的效果，我用了兩個方法來搭配使用：
A. 一個是先做一張透明的圖，上傳到Blog上使用，我的透明圖在這：http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/279149/279149_1.gif
然後使用的語法是：
background-image: url(http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/279149/279149_1.gif);
background-repeat:no-repeat; 或是background-repeat:repeat;
PS.修正一下，簡單做法↓
background-image: none;
B. 另外一個是用background-color:transparent;語法來達成！
因為原本的欄位上的字比較淺，所以我也改的顏面(紅色，色碼#FF0000)
下面這一段是關於我的部份之CSS透明語法
================================================
/*關於我*/
.Avatar {
margin-bottom:3px;
}
.AvatarTopLeft{
background-image: none;
background-color:transparent;
}
.AvatarTopMid{
background-image: none;
background-color:transparent;
}
.AvatarTopRight{
background-image: none;
background-color:transparent;
}
.AvatarMidLeft{
background-image: none;
background-color:transparent;
}
.AvatarMid{
background-image: none;
background-color:transparent;
}
.AvatarMidRight{
background-image: none;
background-color:transparent;
}
.AvatarBottomLeft{
background-image: none;
background-color:transparent;
}
.AvatarBottomMid{
background-image: none;
background-color:transparent;
}
.AvatarBottomRight{
background-image: none;
background-color:transparent;
}
.AvatarId
{color: #3399CC;
font-size: 12px;
}
================================================
下面這一段是文章分類欄位的部份之CSS透明語法
================================================
/*文章分類*/
.ItemCategory-Lf {
background-image:none;
background-color:transparent;
}
.ItemCategory-Mid {
background-image:none;
background-color:transparent;
font-size: 15px;
color: #FF0000; /*欄位Bar上的字的顏色 */
font-weight:normal;
padding-left:0px;
}
.ItemCategory-Rt {
background-image:none;
background-color:transparent;
}
.ItemCategory-bullet {
list-style-image:url(/_theme/skin/list/bulletCategory.gif);
list-style-position:inside;
}
.ItemCategory-Bg {
background-image:none;
background-color:transparent;
word-break:break-all;
border-top:1px solid #D79696; /* 原本是0px 會變成沒有上面線的ㄩ型框線，所以改成1px，讓它變成口 */
border-bottom:1px solid #D79696;
border-right:1px solid #D79696;
border-left:1px solid #D79696;
padding:0px;
margin-bottom:3px;
}
================================================
下面這一段是搜尋文章欄位的部份之CSS透明語法
================================================
/*搜尋文章*/
.ItemSearch-Lf {
background-image: none;
background-color:transparent;
}
.ItemSearch-Mid {
background-image: none;
background-color:transparent;
font-size: 15px;
color: #FF0000;
font-weight:normal;
padding-left:0px;
}
.ItemSearch-Rt {
background-image: none;
background-color:transparent;
}
.ItemSearch-bullet {
list-style-image: url(/_theme/skin/list/bulletSearch.gif);
list-style-position:inside;
}
.ItemSearch-Bg {
background-image:none;
background-color:transparent;
word-break:break-all;
border-top:1px solid #D79696;
border-bottom:1px solid #D79696;
border-right:1px solid #D79696;
border-left:1px solid #D79696;
padding:0px;
margin-bottom:3px;
}
================================================
其他部份其實也是類似的做法，我就不全部列出來了！以此類推。就先這樣ㄌㄡ，如果有問題，就再問我啦！
就再問我啦！
留言列表
