這個問題已經被問過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不熟,純粹自己研究研究而已!



隨機文章


  • 歡迎來到隨意窩Xuite

    開啟選單瀏覽服務或以關鍵字搜尋。

     
  • 瀏覽更多精彩內容

    切換至格主其他頻道或直接搜尋。

     
  • 快速便利分享工具

    提供多種分享方式傳遞內容資訊。

     
  • 更多推薦APP

    隨意遊與隨食記app僅支援ios裝置。