css+filter实现简单的图片透明效果

在网页设计中，我们经常需要实现一些基本的交互功能，其中之一就是图片的透明度控制。在这段代码中，我们看到了如何通过简单的CSS和JavaScript实现了一个非常实用的透明度控制功能。

让我们看看CSS部分。开发者定义了两个样式类：`.opacity-20` 和 `.opacity-100`。这两个类分别用于设置元素的透明度为20%和完全不透明（即透明度为100%）。为了兼容不同的浏览器，这里使用了两种不同的方法来设置透明度：`filter:alpha(opacity=XX)` 用于IE浏览器，而 `-webkit-filter:opacity(XX)` 则用于Chrome等Webkit内核的浏览器。

接下来是JavaScript部分。这里定义了一个名为 `makevisible` 的函数，该函数接受两个参数：`cur` 和 `which`。`cur` 指的是当前的图片元素，而 `which` 用于决定图片的透明度状态。当鼠标移入图片时，调用 `makevisible(this, 0)`，将图片的透明度设置为完全不透明；当鼠标移出图片时，调用 `makevisible(this, 1)`，将图片的透明度设置为20%。这种交互设计使得图片在鼠标移入时显示清晰，移出时保持一定的透明度，增加了视觉效果。

我们看到了一段HTML代码，其中 `` 标签用于显示图片，并使用了 `onMouseOver` 和 `onMouseOut` 属性来调用上面定义的 `makevisible` 函数。该标签还包含了 `border=1` 和 `"` 属性，分别用于设置图片边框和备用文本。

这段代码非常简洁，但实现的效果却非常好。它利用CSS和JavaScript实现了图片的透明度控制功能，提高了网页的交互性和视觉效果。无论是对于开发者还是用户来说，这都是一个非常实用且有趣的功能。希望这篇文章能对大家有所帮助。