css透明背景不相容解決辦法詳解

css透明是一個技術活，因為這裡面涉及到了IE8及以下版本不相容opacity這個css3屬性，而filter:alpha(opacity=80)這個值則是不相容IE6.網上比較流行的透明css是這樣子寫的。

代碼如下	複製代碼
.transparent_class { /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; }

這裡我們使用的是整個層的一個透明，當你使用了上面這個代碼之後，那裡面的文字和圖片都會變透明了，但有時候我們需要的知識背景顏色透明，或者背景圖片的一個透明。

1.背景圖片透明

又是一個相容問題了，IE8及以下的不支援rgba（RGBA 顏色值是 RGB 顏色值的擴充，帶有一個 Alpha 色板 – 它規定了對象的不透明度。），下面這個代碼是網上比較流行的一個寫法，支援IE系列瀏覽器，不過前輩的經驗是少用哦。

代碼如下	複製代碼
.hex_color {  filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7FFF0000', endColorstr='#7FFF0000'); } :root .hex_color {  filter:none;  /*處理IE9瀏覽器中的濾鏡效果*/  background:rgba(255,0,0,0.5); }

2.透明背景圖片

我們都知道IE6下透明的背景圖片會有預設的陰影，要解決這個問題可以有這麼幾種方法

a.使用jsDD_belatedPNG來實現，話說淘寶騰訊這些的都不用這些外掛程式的，也許他們都是通過css來解決的吧

b.把圖片儲存為png8的格式，我們都知道png8儲存的時候會有一些陰影和鋸齒的影響。今天在一篇文章裡面看到可以用firework來匯出png8.

原文提到：

在fireworks裡一定要使用匯出alpha 透明的png8，而不是儲存alpha 透明的png8。
步驟：

代碼如下	複製代碼
Fireworks >>檔案>>匯出嚮導

然後一步步往下會得到下圖介面，儲存就好了：

圖示
用這個儲存方法解決了毛邊的問題，這樣就不會有是使用png8堅硬的邊緣或者使用png24的藍底問題了。但圖片的半透都成了全透，所以如果圖片有半透的，並且半透是需要保留的，那麼現在我的辦法只有使用png24格式在IE6下使用濾鏡。

c.使用濾鏡。

代碼如下	複製代碼
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/dot_2.png"); _background: none;

d.除了png8之外，使用gif和jpg就是另外一種方案。可以分出IE6和其他瀏覽器的兩種不同圖片格式，圖個相容唄。