基本原理【Basic Concept】：

要实现本实例的效果，需要在DIV或A等图片容器中添加一个额外的<span>标签，最终的修饰效果就是通过对span设置背景来实现的。当然如果你不希望在你的代码中插入这个span标签，也可以用JS的方法来实现，在本教程中也将提及：

典型的HTML结构如下，其中容器标签DIV视具体情况更改：

复制内容到剪贴板
代码:

关键的CSS设置如下：
复制内容到剪贴板
代码:

复制内容到剪贴板
代码:

IE6中PNG透明Hack【IE PNG Hack】：

为了让IE6支持PNG的透明属性，我们必须使用一个经典的Hack。下载一份iepngfix.htc放置到网页目录中，并在页面的<head>标签中添加如下代码：
复制内容到剪贴板
代码:

我知道有些人，尤其是很注重和可访问性的开发爱好者，不是很愿意在HTML中增加一个额外的span标签，那么这里推荐一个JS应用方案。下载一份jquery.js放置到网页目录中把下列代码添加到页面的<head>中：
复制内容到剪贴板
代码:

典型效果预览【Look and Feel】：

下面是这则CSS技巧的典型应用，大家可以在提供的源代码中进行研究，你也可以在不同的浏览器中测试其兼容性。你可以注意一下示例页面的HTML代码，都是一模一样的，其变化都是通过CSS控制来实现的。注意有些效果在CSS或HTML中有细微的变化，具体可以查看示例源码。