HTML5实践 -

下一站永远 · 发表于 2013-1-4 03:08:12

<div id="cnblogs_post_body">　　转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779890.html

　　本节课我们将介绍，如何使用css在不修改图片源的前提下装饰你的图片画廊。这里用到的技巧也很简单，就是在图片之前创建一个<span>，并在span上使用background-image生成一个遮罩的效果。这种方式既简单又灵活，demo中介绍了20多种样式，大家可以参看。

　　demo预览地址：http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html?TB_iframe=true&height=550&width=840
　　demo下载地址：http://www.webdesignerwall.com/file/decorative-gallery-demo.zip

　　这种css技巧带来的好处

节约时间 &mdash; 你不需要在photoshop中创建图片模板，然后为每张图片生成独立文件。
保留原始图片源 &mdash; 我们不用担心日后需要更换图片主题的时候，没有原图片。因为我们根本没有修改他。
相当的灵活 &mdash; 你只需要调整css就能换一个完全不同的样式。
在任何站点都能工作 &mdash; 这个css技巧在任何站点，任何图片大小下都适用。
解决浏览器兼容问题 &mdash; 通过了大多数浏览器的测试 (Firefox, Safari, Opera, 甚至包括行为怪异的IE6)。

　　基本概念

　　我们需要在包裹img的div中创建一个span元素，在他上面适用background-image来产生遮罩的效果。如果你不喜欢插入一个空的span标签，我们可以使用javascript来动态生成他，之后我们会介绍到。下面的代码揭示了他如何工作。

对于css代码，我们需要注意的是，需要为div设置position:relative，为span设置 position:absolute。这样你就可以通过为span设置top和left属性，来任意摆布他在div中的位置了。

　　IE PNG hack

　　为了能让透明的png图片在ie6中工作，我们需要使用到强大的 iepngfix.htc hack。下载 iepngfix.htc 文件，并在页面<head>标签中添加如下代码。
<div class="cnblogs_code">

		自动登录	找回密码
密码			立即注册