使图像透明在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中显示非透明背景

回答

相关问题