翻译整理：西米CC
网络上很流行一个关于利用CSS为网页中的文本添加高光效果的教程，本文将介绍则原理很相似的CSS技巧，为网页中的图片添加丰富多样的装饰效果。这个技巧很简单，主要是在一个额外的span标签上做文章，通过其与背景图片的叠加达到修饰功能。技巧实现的方法具有很好的兼容性，大家可以在示例页面中浏览近20种装饰样式，从简单的小图标到复杂的遮罩，本质上都是基于同一原理：
[ >>> 浏览综合展示效果 <<< ]
[ >>> 下载本实例源代码 <<< ]
这么做的好处【The Benefits】：
节省加载时间——基本上所有的工作都由CSS完成；
保护原始图片——省去了在PS等软件中处理图片的麻烦；
样式重构简易——只需要编辑CSS即可改变装饰外观；
多浏览器兼容——这个CSS效果通过了Firefox, Safari, Opera甚至IE6等浏览器的兼容测试。
基本原理【Basic Concept】：
要实现本实例的效果，需要在DIV或A等图片容器中添加一个额外的标签，最终的修饰效果就是通过对span设置背景来实现的。当然如果你不希望在你的代码中插入这个span标签，也可以用JS的方法来实现，在本教程中也将提及：
典型的HTML结构如下，其中容器标签DIV视具体情况更改：
- <div class="photo">
- <a href="http://ximicc.com">
- <span></span>
- <img src="images/11.jpg" alt="image" />
- </a>
- </div>
关键的CSS设置如下：
- .photo {
- margin: 30px;
- position: relative;
- width: 180px;
- height: 130px;
- }
- .photo span {
- width: 20px;
- height: 18px;
- display: block;
- position: absolute;
- top: -12px;
- left: 12px;
- background: url(ximicc.gif) no-repeat;
- }
IE6中PNG透明Hack【IE PNG Hack】：
为了让IE6支持PNG的透明属性，我们必须使用一个经典的Hack。下载一份iepngfix.htc放置到网页目录中，并在页面的head标签中添加如下代码：
- <!--[if lt IE 7]>
- <style type="text/css">
- .photo span { behavior: url(iepngfix.htc); }
- </style>
- <![endif]-->
JQuery方案【The jQuery Solution】：
我知道有些人，尤其是很注重网站优化和可访问性的开发爱好者，不是很愿意在HTML中增加一个额外的span标签，那么这里推荐一个JS应用方案。下载一份jquery.js放置到网页目录中把下列代码添加到页面的head中：
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- //prepend span tag
- $(".photo a").prepend("<span></span>");
- });
- </script>
典型效果预览【Look and Feel】：
下面是这则CSS技巧的典型应用，大家可以在提供的源代码中进行研究，你也可以在不同的浏览器中测试其兼容性。你可以注意一下示例页面的HTML代码，都是一模一样的，其变化都是通过CSS控制来实现的。注意有些效果在CSS或HTML中有细微的变化，具体可以查看示例源码：
1.透明胶布装饰效果【浏览示例效果】：
2.右下侧小图标装饰【浏览示例效果】：
3.简单文本介绍【浏览示例效果】：
4.气泡文本修饰【浏览示例效果】：
5.别针兼文本效果【浏览示例效果】：
7.Flash替换文本【SIFR版浏览示例效果】：
[color=Maroon]9.黑白风格相框【浏览示例效果】：
10.古典风格相框【浏览示例效果】：
12.晶莹高光效果【浏览示例效果】：
