半透明語法

參考看看此為Xuite
版面半透明CSS語法
透過CSS語法改Blog版面效果以前寫過不少，不過倒是沒有特別說半透明的語法，原因是：我記得在IE瀏覽器下，會怪怪地，不太正常！所以記得沒有寫成教學，僅針對透明語法寫過教學！！
我拿另外一本日誌的版面來做實驗：http://blog.xuite.net/jeanson61/tech
我將最新留言跟日曆兩個欄位弄成半透明狀！語法如下↓






/*日曆部份*/
.ItemCalendar-Bg {
/*background-image:url(/_theme/skin/windows/29/itemBg.gif);*/
word-break:break-all;
background-color:#FFFFFF;
border-top:0px dashed #FF60BB;
border-bottom:1px dashed #FF60BB;
border-right:1px dashed #FF60BB;
border-left:1px dashed #FF60BB;
padding:0px;
margin-bottom:3px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
/*最新留言*/
.ItemMessageList-Bg {
/*background-image:url(/_theme/skin/windows/29/itemBg.gif);*/
word-break:break-all;
background-color:#FFFFFF;
border-top:0px dashed #FF60BB;
border-bottom:1px dashed #FF60BB;
border-right:1px dashed #FF60BB;
border-left:1px dashed #FF60BB;
padding:0px;
margin-bottom:3px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}




其實所有的欄位的內容區塊都是在.Item○○○○-Bg { }裡面定義，所以加上半透明CSS語法來做效果！！半透明語法↓
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
就是這三行而已！其實只有opacity:0.5;是最標準的語法，但是這樣的語法，我試過是對IE瀏覽器無效的(看不到半透明效果)！對IE瀏覽器而言反倒是filter:alpha(opacity=50);才有用，但是好像Firefox又無效！！對於mozilla好像需要用-moz-opacity:0.5;才有用！所以乾脆要滿足所有的瀏覽器，就給它們不同的語法！所以三行都加上去吧。
雖然說filter:alpha(opacity=50);對IE瀏覽器有效，但是會有點怪怪的↓

圖片參考：http://c.blog.xuite.net/cf/7b/11732000/blog_698/txt/3900321/3900321_0.jpg

有沒有發現上面這個圖那裡怪怪的？是的！週五&六不見了，另外下面的月底資料也沒有出現！這就是我說的IE瀏覽器下半透明效果怪怪的地方！
那個opacity=50;指的是透明度，0代表完全透明，100代表完全不透明；或是opacity:0.5;，0代表完全透明是，1代表完全不透明。
當然除了欄位裡面的內容可以是半透明！其他像欄位名稱的位置也可以是半透明，請改↓



.ItemMessageList-Mid {
background-image:none;/*url(/_theme/skin/windows/29/blog011_2.gif);*/
background-repeat:repeat;
background-color:#FFE8E8;
font-size: 15px;
color: #FF3C7B;
font-weight:normal;
padding-left:0px;
width="200";
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}




至於其他的欄位，請自己找.Item○○○○-Mid {}去加上半透明語法就ok了！

要全透明的話，請參考↓
※使用CSS修改版面成為透明狀效果、
透明語法範本
其他相關CSS語法可以參考
※推薦CSS自訂版面大全(by安哥爾．摩亞)