使圖像透明在IE中顯示非透明背景

我試圖讓這件事在IE工作（任何版本 - 在FF，歌劇，Safari，Chrome瀏覽器...）：使圖像透明在IE中顯示非透明背景

我有一個背景圖像的DIV。 DIV還包含一個在MouseOver上應該透明的圖像。現在預期的行爲是DIV背景將透過透明圖像（它在所有瀏覽器中都可以實現，但IE）。
相反，它看起來像圖像變得透明，但在白色背景下，我無法通過圖像看到DIV的背景。

下面是一些代碼：

<div><a href="#" class"dragItem"><img /></a></div>

和一些CSS：

.dojoDndItemOver { 
    cursor   : pointer; 
    filter   : alpha(opacity = 50); 
    opacity  : 0.5; 
    -moz-opacity : 0.5; 
    -khtml-opacity : 0.5; 
    } 
    .dragItem:hover { 
    filter   : alpha(opacity = 30); 
    opacity  : 0.3; 
    -moz-opacity : 0.3; 
    -khtml-opacity : 0.3; 
    background  : none; 
    }

所有這一切都被嵌入一個Dojo拖動正落系統，所以dojoDndItemOver將自動設置爲DIV在MouseOver上，dragItem被設置爲圖像周圍的href（使用圖像上的相同類直接不起作用，因爲IE不支持在其他項目上「懸停」href）。

任何想法？或者，它是一種IE專業，只是通過某種方式「模擬」圖像的透明度而不是提供真正的透明度並展示下面的任何內容？

來源

2010-04-08 Select0r

a.dragItem {/*Background behind the image*/} 
a.dragItem img {/*Image is opaque, hiding the background*/} 
a.dragItem:hover img {/*Image is transparent, revealing the background*/}

來源

2010-04-08 11:52:48 AlexanderMP

'a.dragItem：hover img'做了伎倆，非常感謝！ – Select0r 2010-04-08 13:49:38

IE使用取自w3Schools CSS Image transparency的CSS filter:alpha(opacity=x)。您也可以將其應用於DIV背景。

div.transbox 
    { 
    width:400px; 
    height:180px; 
    margin:30px 50px; 
    background-color:#ffffff; 
    border:1px solid black; 
    /* for IE */ 
    filter:alpha(opacity=60); 
    /* CSS3 standard */ 
    opacity:0.6; 
    }

我認爲過濾器是一個壞主意，所以你也可以使用透明的PNG圖像與IE as shown here。

來源

2010-04-08 10:47:18 Kyle

我已經使用的過濾器（見上面我的CSS），我不想做一個透明背景，但圖像（可以是任何格式），使unerlying背景彪炳，還使用一個透明的PNG需要第二個圖像，這不是一個真正的選擇。 – Select0r 2010-04-08 11:30:39

好吧，也許這篇文章會幫助你：http://24ways.org/2007/supersleight-transparent-png-in-ie6 :) – Kyle 2010-04-08 11:57:06

使圖像透明在IE中顯示非透明背景

回答

相關問題