阿尔法更改为CSS2标准的图像悬停？

StackOverflow https://stackoverflow.com/questions/1173914

  •  19-09-2019
  •  | 
  •  

题

我试图增加对我的形象阿尔法效果。该图像是在圆角的矩形形状。我知道有属性来更改阿尔法在CSS3，但我想是符合W3C标准，这仍然是CSS2。

对不起，我没有正确ealier说明我的问题。我试图改变阿尔法当我将鼠标悬停在使用CSS2的图像。我正在考虑使用“背景图片”为100％的α，并使用img标签为50％的α。有没有更好的方式来做到这一点？

有帮助吗？

解决方案

如果图像是 PNG ，则可以包括直接阿尔法在图像中。当然，这将需要 PNG修正脚本IE6。

否则，您可以使用CSS来设置透明度。

编辑：更新后悬停唯一的工作，请注意，这不会工作在IE6

。 
img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}

其他提示

一个web开发者实现了透明效果的典型方法是使用部分透明的PNG文件作为背景。

div {
  background: #FFF url(img/bg.png) repeat top left;
}

使用PNG会按照您所期望的，但如预期的透明度不工作：

div {
  filter: alpha(opacity=50); /* IE */
  -moz-opacity: 0.5; /* Firefox */
  -webkit-opacity: 0.5; /* Older Safari, Webkit */
  opacity: 0.5; /* CSS Standard - Always last in the list */
}

这将使DIV 50％透明，包括它的所有子，文本的和所有。你真的需要玩的不透明度设置，以确保你得到的结果如你所愿。

这是更简单的修复，如果你能忍受为IE6略差的用户体验，是使用Alpha透明图像的所有现代浏览器，并且没有透明（或只是一种颜色），以IE6发送图像。寻找那些少数用户有点差，但少了很多代码维护。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top