200709031330日誌中央文章區塊半透明效果探討

這個問題已經被問過N次了,還是寫個一篇來探討回應一下好了,主要是因此好多人用半透明的語法定義在CSS裡面的/*文章外框*/#content{}那一段,但是卻沒有任何反應,所以問我要在CSS裡面那裡去改,我之前都是建議網友定義在/*文章主體*/.blogbody{}裡面,這樣就會有效果!

首先再回顧一下半透明的CSS語法,它的語法在不同的瀏覽器下有不同的語法,所以總結要加上三行↓
  /* for IE */
  filter:alpha(opacity=50);
  /* CSS3 standard */
  opacity:0.5;
  /* for Mozilla, Firefox */
  -moz-opacity:0.5;

對於微軟的IE瀏覽器,其CSS語法是↓
 filter:alpha(opacity=50);
可以透過修改opacity=0~100,0~100表示透明度,100就是全透明,0是不透明。

標準的CSS語法則是↓
opacity:0.5;
可以透過修改opacity:0~1,0~1表示透明度,1就是全透明,0是不透明。

Firefox瀏覽器支援的CSS語法則是↓
-moz-opacity:0.5;
可以透過修改-moz-opacity:0~1,0~1表示透明度,1就是全透明,0是不透明。

在日誌中央的文章區塊,有三段CSS都跟它有關,分別為↓
/*中間欄*/
#mid{
 }

/*文章外框*/
#content{
}

/*文章主體*/
.blogbody{
}
有興趣研究的人,可以去玩看看,將半透明語法貼上去每個地方比較看看結果如何!備註,記得要搭配一下背景顏色↓
 background-color:FFFFFF;
  /* for IE */
  filter:alpha(opacity=50);
  /* CSS3 standard */
  opacity:0.5;
  /* for Mozilla, Firefox */
  -moz-opacity:0.5;

我用Firefox來檢查,不管貼在那一段,都有效!都會出現效果。會有問題的狀況是用IE瀏覽器時,只有貼進
/*文章主體*/
.blogbody{
}
才有效,另外兩個地方放半透明的語法都出現不透明的白色底!

至於為什麼會有這樣的不同,我也不知道,我只知道結果就是不正常,應該說是IE瀏覽器有問題吧!因為用Firefox都正常說!

下面就是用Firefox可以看到的半透明效果↓

用IE最多看到的效果↓

我故意用不同顏色框將
/*中間欄*/
#mid{
黑色框框
 }

/*文章外框*/
#content{
藍色框框
}

/*文章主體*/
.blogbody{
綠色框框
}
每個顯示成不同框色,這樣比較好辨識效果如何。
我甚至於把三段都貼上半透明語法在IE瀏覽器下都是無效!只能在/*文章主體*/加,其他地方都不加才有上面那張圖上的半透明效果。

當然如果你有其他的建議或是結果也歡迎留言交流一下,畢竟我也是對CSS不熟,純粹自己研究研究而已!

回應

瘋狂亂收藏家、收藏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
不顯示的自由欄位