2

我试图让这个东西在 IE 中工作（任何版本 - 在 FF、Opera、Safari、Chrome 中工作......）：

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

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

4

2 回答 2

2 
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-08T11:52:48.100 回答
1

IE 使用filter:alpha(opacity=x)取自w3Schools CSS 图像透明度的 CSS 。您也可以将其应用于 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 中使用透明 png，如下所示。

于 2010-04-08T10:47:18.567 回答