基本原理【Basic Concept】：
要实现本实例的效果，需要在DIV或A等图片容器中添加一个额外的<span>标签，最终的修饰效果就是通过对span设置背景来实现的。当然如果你不希望在你的代码中插入这个span标签，也可以用JS的方法来实现，在本教程中也将提及：
典型的HTML结构如下，其中容器标签DIV视具体情况更改：
复制内容到剪贴板
代码:
| 以下为引用的内容： <div class="photo"> |
关键的CSS设置如下：
复制内容到剪贴板
代码:
| 以下为引用的内容： .photo { |
复制内容到剪贴板
代码:
| 以下为引用的内容： .photo span { |
IE6中PNG透明Hack【IE PNG Hack】：
为了让IE6支持PNG的透明属性，我们必须使用一个经典的Hack。下载一份iepngfix.htc放置到网页目录中，并在页面的<head>标签中添加如下代码：
复制内容到剪贴板
代码:
| 以下为引用的内容： <!--[if lt IE 7]> |
我知道有些人，尤其是很注重网站优化和可访问性的开发爱好者，不是很愿意在HTML中增加一个额外的span标签，那么这里推荐一个JS应用方案。下载一份jquery.js放置到网页目录中把下列代码添加到页面的<head>中：
复制内容到剪贴板
代码:
| 以下为引用的内容： <script type="text/javascript" src="jquery.js"></script> </script> |
典型效果预览【Look and Feel】：
下面是这则CSS技巧的典型应用，大家可以在提供的源代码中进行研究，你也可以在不同的浏览器中测试其兼容性。你可以注意一下示例页面的HTML代码，都是一模一样的，其变化都是通过CSS控制来实现的。注意有些效果在CSS或HTML中有细微的变化，具体可以查看示例源码。
admin
(责任编辑：admin)本文仅代表作者观点,与个人站长网立场无关.
