巧用CSS为图片添加修饰点缀效果

=700) window.open('http://ximicc.com/attachments/month_0810/w20081011215227.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

原文来自：CSS Decorative Gallery
翻译整理：西米CC

网络上很流行一个关于利用CSS为网页中的文本添加高光效果的教程，本文将介绍则原理很相似的CSS技巧，为网页中的图片添加丰富多样的装饰效果。这个技巧很简单，主要是在一个额外的标签上做文章，通过其与背景图片的叠加达到修饰功能。技巧实现的方法具有很好的兼容性，大家可以在示例页面中浏览近20种装饰样式，从简单的小图标到复杂的遮罩，本质上都是基于同一原理：

[ >>> 浏览综合展示效果 > 下载本实例源代码 '700')this.height='700';" >

典型的HTML结构如下，其中容器标签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放置到网页目录中，并在页面的标签中添加如下代码： 复制内容到剪贴板 代码:
JQuery方案【The jQuery Solution】：

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

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

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

1.透明胶布装饰效果【浏览示例效果】：

=700) window.open('http://ximicc.com/attachments/month_0810/j2008101122182.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

2.右下侧小图标装饰【浏览示例效果】：

=700) window.open('http://ximicc.com/attachments/month_0810/520081011222158.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

3.简单文本介绍【浏览示例效果】：

=700) window.open('http://ximicc.com/attachments/month_0810/j20081011222328.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

4.气泡文本修饰【浏览示例效果】：

=700) window.open('http://ximicc.com/attachments/month_0810/j2008101122257.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

5.别针兼文本效果【浏览示例效果】：

=700) window.open('http://ximicc.com/attachments/month_0810/m20081011222629.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

6.另一种胶布粘贴效果【浏览示例效果】【IE6版本】：

=700) window.open('http://ximicc.com/attachments/month_0810/c20081011222940.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

7.Flash替换文本【SIFR版浏览示例效果】：

=700) window.open('http://ximicc.com/attachments/month_0810/62008101122325.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

8.胶布+简介文本【浏览示例效果】【IE6版本】：

=700) window.open('http://ximicc.com/attachments/month_0810/n20081011223449.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

9.黑白风格相框【浏览示例效果】：

=700) window.open('http://ximicc.com/attachments/month_0810/i2008101122360.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

10.古典风格相框【浏览示例效果】：

=700) window.open('http://ximicc.com/attachments/month_0810/b20081011223723.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

11.随意涂抹水印修饰【浏览示例效果】【SIFR版本】：

=700) window.open('http://ximicc.com/attachments/month_0810/920081011223914.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

12.晶莹高光效果【浏览示例效果】：

=700) window.open('http://ximicc.com/attachments/month_0810/620081011224147.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >

学习了，谢谢分享