跨瀏覽器(IE)的透明度(opacity)與圖片大小(background-size)與位置

HP — Mon, 17 Oct 2011 04:17:09 +0800

這篇文章是回應某位同學的網頁設計作業，回應目的是這位同學使用了一些 CSS 的進階語法，但在IE中不支援，所以寫了篇文章和他說明及提供修改建議。（不過此作業中的網頁可能會有所修改，和原始繳交時不一樣。）

原文回應在：http://mepopedia.com/forum/read.php?855,16483,16659#msg-16659

同學你好：

我注意到你的網頁裡面使用了非常多的進階語法，而且裡面有許多 CSS3 的語法。CSS3 的語法的好處是很好用而且功能很強，但缺點就是其實最多人使用的瀏覽器以及版本(IE6~IE8)基本上是不支援的。所以，你可以找一個 IE8 的瀏覽器看一看你的網頁，你可以發現有幾個地方有很大的不一樣。

嗯，我想我直接作個截圖好了：

左邊的是 Chrome14 的效果，右邊的是 IE8。

　

細節就不提了。我想最明顯的差異主要是「#header 背景圖的大小」和「#content 背景透明度」（在IE中背景沒有任何透明度）。

其實這二個問題不好解，我現在也沒什麼時間幫你試。我大致和你提我的看法與建議。

1. 背景圖的大小 (background-size)

「background-size」是 CSS3 才有的進階語法。在微軟的網頁中，你找一下可以看到，background-size 一直到 IE9 才支援，目前最多人用的 IE8 (和之前的IE版本) 都沒有。因為沒有支援，所以就會看到目前這樣很大的差異（不過我其實覺得也滿有意思的，一般人應該不會覺得有問題）。

我建議可以試著把背景拿出來放到 #header 裡面用裡面再加個 align=right 的方式去寫。要微調位置的話再加些 margin-top 或 margin-left 就可以了。不過我沒有試，也不確定效果怎麼樣。要特別注意的是，我的經驗是要寫在

之前，這樣圖片才會置右，不然就會等

的標題文字都寫完了才會出現圖片。

我寫個示意原始碼好了（不過不保證有效果）：
<div id="header"> <h1>銀魂</h1> 空知英秋的少年漫畫作品，在《週刊少年Jump》2004年2號開始連載。 </div>
2. 背景透明度（opacity）

這邊你也用了非常高段語法「rgba」顏色設定：把原本的設定顏色的語法 #fffff，改為在最後一個參數為設定透明度而比較進階的 rgba(255%, 255%, 255%, 0.9)。不過一樣，IE8 也是不支援。讓 IE 支援的方式是在 CSS 中加上 filter:alpha(opacity=90);。如果不透明度設為 0.9，在opacity就要寫90。

所以跨瀏覽的相容性寫法大致是這樣：

#content{
  background: rgba(255%, 255%, 255%, 0.9);
  filter:alpha(opacity=90);
  ......(其他css屬性)
}

不過這樣的話，你會發現不僅背景顏色有透明效果，連「文字」也會跟著「透明」起來。我不確定怎麼改善，但我想可能是因為不透明度是設在整個 #content，所以你在 #content 外面再加一層 div，專門設不透明度，然後 #content 裡面不要設任何背景顏色，讓背景可以整個透進來。如果你有試的話，也請和我說一下試的結果。

最後，如果真得改不出來就不用改了。就改回原來的樣子，或者簡化一點不要那麼多進階功能也可以。因為要改到有很漂亮簡潔的效果，又要讓大多數的人（瀏覽器）看得到，是滿困難而需要經驗或專業的。