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

【问题标题】：Make an image transparent in IE to show non-transparent background在 IE 中使图像透明以显示不透明的背景
【发布时间】：2011-02-05 15:30:43
【问题描述】：

我正试图让这个东西在 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 系统中，因此 dojoDndItemOver 将自动设置为 MouseOver 上的 DIV，dragItem 设置为图像周围的 href（在图像直接不起作用，因为 IE 不支持在其他具有 href 的项目上“悬停”。

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

【问题讨论】：

标签： css internet-explorer image background transparent

【解决方案1】：

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。

【讨论】：

我已经在使用过滤器（请参阅上面的 CSS），我不想让背景透明，而是让图像（可以是任何格式）让不规则的背景闪耀，也使用透明 PNG 需要第二张图片，这不是一个真正的选择。
好吧，也许这篇文章会对你有所帮助：24ways.org/2007/supersleight-transparent-png-in-ie6 :)

【解决方案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*/}

【讨论】：