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

有沒有發現上面這個圖那裡怪怪的?是的!週五&六不見了,另外下面的月底資料也沒有出現!這就是我說的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安哥爾.摩亞)

回應

瘋狂亂收藏家、收藏CPU、手表以及Xuiters

今天去哪玩??
天氣
累積 | 今日
loading......
訂閱狗猫電子報

輸入你的email address:

Delivered by FeedBurner

    沒有新回應!
關鍵字
Xuite電影貼紙
平均分數:0 顆星
投票人數:0
我要評分:





Powered by Xuite
Re:[台北搬家公司 ...],By 搬家公司-賴工匠 於2016-08-15
Re:[讚!!!],By blog 於2015-06-18
Re:[謝謝],By blog 於2015-06-15
Re:[[Xuite秘笈]上傳M...],By ★ㄚ進のsmile加油站★ 於2015-05-03
Re:[隨意聽App推薦],By ★ㄚ進のsmile加油站★ 於2015-05-03
Re:[新版CSS]欄位的...],By 天使的花園 於2015-04-12
Re:[[Xuite秘笈]背景...],By 天使的花園 於2015-04-05
Re:[[Xuite秘笈]背景...],By 天使的花園 於2015-04-05
Re:[名器],By 名器 於2014-12-16
Re:[棋牌游戏平台,...],By 棋牌游戏平台,网上棋牌游戏平台,棋牌游戏平台网站,易发棋牌游戏平台-228238.com 於2014-11-24
CSS樣版三欄兩欄倒數冬季計時居家黑色系右欄藍色風水語法自由欄位浮動寬度播放器保健步道如果劇團行動兒童劇夢想兩欄右iPADCSS語法裝潢耶誕borderiPhone影音系統家具手機家具Pixar登入問題望洋山L型客廳幾何影音播放器邊框標題名稱粉紅基礎入門圖片縮小Style Information訊息中心文章鎖童話故事密碼鎖more
不顯示的自由欄位