Question

我试图让这个东西在IE中运行（任何版本 - 适用于FF，Opera，Safari，Chrome ......）：

我有一个带背景图像的DIV。 DIV还包含一个应该是onMouseOver透明的图像。现在预期的行为是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 Drag-n-Drop系统中，因此dojoDndItemOver将自动设置为MouseOver上的DIV，dragItem设置为图像周围的href（使用图像上的同一个类根本不起作用，因为IE不支持“悬停”其他项目（href）。

有什么想法吗？或者它是一个IE专业，只是通过某种方式“模拟”图像的透明度而不是提供真正的透明度并显示下面的内容？

Answer 1

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*/}

Answer 2

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;
  }

我认为过滤器是一个坏主意，所以你也可以使用IE as shown here的透明png。

在IE中使图像透明以显示不透明的背景

2 个答案: