[轉貼]版面半透明CSS語法

古麗家族

/*日曆部份*/

.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瀏覽器有效，但
是會有點怪怪的↓


有沒有發現上面這個圖那裡怪怪的？是的！週五&六不見了，另外下面的月底資料也沒有出現！這就是我說的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了！