CSS 技巧：用 CSS 装饰图片

很久之前就看到了这篇文章：CSS Gradient Text Effect ，来自强大的 webdesignerwall ，这是我最喜欢的博客之一，文章虽然不多，但却篇篇是精品，而且博客不论配图还是细节做的都很出色。

这篇文章主要介绍了用简单的 CSS 技巧来装饰图片的技巧，方法很简单，只需要用一个 span 标签并对它应用背景图，即可以做出非常漂亮但不失灵活的效果。而且作者还提供了 20 多种经过精心设计的演示，从简单的装饰一个小图片到应用圆角的边框，再到半透明的蒙版……不废话来，先来看演示：

View Demo (在线演示） and Download（下载）

作者给出了这样做的几点理由：

  • 省时方便：不用再用 PhotoShop 去对每张图片进行处理
  • 完好地保留了原始图片：因为是用 CSS 对图片进行样式处理，所以不用对图片进行任何修改，保留了最原始的完整的图片。
  • 非常的灵活：你完全可以通过只修改 CSS 而使图片的效果变成另外一个样子。
  • 应用广泛：可以在任何地方，对任意尺寸的图片进行装饰。
  • 兼容性强：在大部分浏览器上测试通过，包括 (Firefox, Safari, Opera, 甚至是 IE6 )。

基本思路：

思路挺简单的，就是通过在 DIV 中插入一个额外的 SPAN ，然后通过对插入的 SPAN 设置背景图片来实现图片覆盖的效果。如果你不想在 HTML 中插入额外的、没有语义的标签的话，你可以用 javascript 来解决。下面会介绍到！下面的图很好地解释了它工作的原理：

工作原理

上面代码中关键的是为div 元素设置 position:relative，而为相应的 span 元素设置 position:absolute，然后你就可以将 span 通过 CSS 的 top 和 left 而放置到任意的地方。

针对 IE6 的 PNG Hack

示例中用到了很多 PNG 的背景图片来实现覆盖透明的效果，而 IE6 不支持 PNG 透明，所以要用 Hack 让 IE6 支持 PNG 透明，网上这样的方法有很多，这里作者推荐了一种：iepngfix.htc hack 。需下载 iepngfix.htc 文件并将下面的代码插入到页面的  <head> 标签中即可。

<!--[if lt IE 7]>
<style type="text/css">
  .photo span { behavior: url(iepngfix.htc); }
</style>
<![endif]-->

jQuery 实现方法

如果你不想插入空的、无语意的 span 标签的话，你可以用 jQuery 来向页面中动态地插入标签，也非常的方便。而且不用对原页面进行任何修改。

下面是代码示例：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  //prepend span tag
  $(".photo a").prepend("<span></span>");
});
</script>

引入 jQuery 框架后，利用 .prepend 方法向 .photo a 的元素前插入 span !

下面让我们来看下作者为我们做好的 15 个精美的示例：

#1. Simple Gallery (see demo)

Demo 1

#1b. Mini Icons (see demo)

Demo 1b

#2. Photo With Text (see demo)

还可以添加对应的文字。

photo with text

#2b. Popup Text (see demo)

popup text

#3. Mini Paper Clip (see demo)

Mini paper clip demo

#4. Cork Board Gallery (see demo, IE6 version)

cork board gallery

sIFR Version (Flash Text Replacement) (see sIFR demo)

这个例子中的 span 标签是用 jQuery 添加的！

sIFR demo

#4b. Cork Board With Masking Tape (see demo, IE6 version)

Demo 2b

#5. Art Gallery – Black Frame (see demo)

black picture frame

#5b. Art Gallery – Gold Frame (see demo)

gold art frame

#6. Grungy Watercolor (see demo)

grungy watercolor

sIFR Version (see sIFR demo)

sIFR demo

#7. Glossy Style (see demo)

glossy style

#8. Wood Panel Gallery (see demo)

wood panel

怎么样，很帅吧！！本来想用这个技巧实现区别 wordpress 评论的作者评论的，但一直没想好样式！！希望大家也能用得到哈……

Posted in Technology, University, Web Tagged ,
Share with Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

相关文章本月热门点击排行

  • N/A
Post a comment 2009/02/23 – 16:099,187 Views
Post a comment | Trackback URL | RSS Comments 78 Comments
  1. 2009/02/27 at 13:17 | #51
    yadandimaoNotify

    你的评论插件不错什么时候共享下

  2. 2009/02/27 at 13:53 | #52
    SayiseeNotify

    好文章，来晚了，呵呵。

  3. 2009/02/27 at 13:59 | #53
    xiaorszNotify

    @yadandimao 其实就是以前用的那个，使用 jQuery 实现 wordpress 的 Ajax 留言，只是又稍微改了下！！而且现在还不支持 2.7 的嵌套评论呢！！

  4. 2009/02/27 at 14:00 | #54
    xiaorszNotify

    @Sayisee 忙着考研呢？好久没“看见”你了啊，呵呵！！

  5. 2009/02/27 at 14:07 | #55
    SayiseeNotify

    @xiaorsz 恩，正式开始复习了，所以消失了一段，不过还是会定期出现的，呵呵。

  6. 2009/02/27 at 23:49 | #56
    RockNotify

    xiaorsz出品,必属精品…瞧瞧这点击率…嘿嘿~~

    唔…这评论还带这些功能的…

  7. 2009/02/28 at 01:11 | #57
    孙建Notify

    CSS是我非常不想涉及了一个领域，但是又不得不用~`晕

  8. 2009/02/28 at 15:22 | #58
    xiaorszNotify

    @孙建 为什么不想涉及啊？呵呵！！CSS 会几个单词就行了，也不难，有时候还是蛮有意思的！！

  9. 2009/03/01 at 09:40 | #59
    RDENNotify

    值得研究，收藏下来~

  10. 2009/03/04 at 09:16 | #60
    ptubuntuNotify

    好文章,可惜我不写程序的

  11. 2009/03/04 at 15:56 | #61
    阿羡Notify

    直得一试

  12. 2009/03/04 at 16:13 | #62
    yinheliNotify

    终于好了.昨天都不能访问了.zoll的也是.看来你们的服务器总是出问题呀.

  13. 2009/03/04 at 16:18 | #63
    笨猫Notify

    你这个主题不是INOVE的吗？

  14. 2009/03/04 at 16:21 | #64
    笨猫Notify

    首页做连接吗？

    鄙站www.benmao.com PR4

    如果贵站你情我愿就就来我站给俺留个言啥的。。

  15. 2009/03/04 at 22:45 | #65
    xiaorszNotify

    @yinheli 很长时间都没出问题了，这次又来了！！IP被“墙”了，非常时期啊！！

  16. 2009/03/04 at 23:00 | #66
    xiaorszNotify

    @笨猫 当然不是，只是有点像！！呵呵！！我首页的链接是根据在本站评论数多少排序显示的！！并不会全部显示，不知你愿意否？

  17. 2009/03/07 at 18:49 | #67
    炽炎之羽Notify

    文章不错，不过俺不喜欢花花绿绿的。img那句少了alt属性，我也常犯的错误。

  18. 2009/03/09 at 01:49 | #68
    篮球博客Notify

    学到东西了。。

  19. 2009/03/13 at 22:37 | #69
    wulinfoNotify

    我之前的博客应用过，就是使用了相对定位感觉差了点，比较难于控制

  20. 2009/03/13 at 22:40 | #70
    wulinfoNotify

    还有我想问一下这个提交评论Ajax是使用了什么插件，我测试了几款都没有满意的

  21. 2009/03/16 at 15:56 | #71
    xiaorszNotify

    @wulinfo 这个不是插件，以前写过个教程，你可以去看下！！也挺容易的，而且容易控制！！

  22. 2009/03/17 at 07:28 | #72
    popdoNotify

    确实很不错的。要挖来好好应用一下！

  23. 2009/03/20 at 11:12 | #73
    HuiNotify

    确实很不错的，回去试试~

  24. 2009/04/26 at 19:44 | #74
    LiGhtNotify

    这范例，相当漂亮啊……

  25. 2009/04/29 at 22:40 | #75
    JutoyNotify

    @xiaorsz 我当时看的时候也感觉有点像的~不过我更喜欢这样的颜色搭配~

  26. 2009/06/09 at 19:10 | #76
    boloNotify

    不错啊，有创意

  27. 2009/07/19 at 18:58 | #77
    妹妹Notify

    技术牛人哈，不过偶看不懂。

  28. 2009/08/27 at 17:57 | #78
    laiweiNotify

    体验下~

Comment pages 1 2
2 Trackbacks
  1. By CSS 技巧：用 CSS 装饰图片 | Huiの世界 on 2009/03/20 at 11:09

    [...] 在xiaorsz 看到了这篇文章，源文CSS Gradient Text Effect ，来自强大的 webdesignerwall，文章虽然不多，但却篇篇是精品，而且博客不论配图还是细节做的都很出色。 [...]

  2. By webdesignerwall经典教程：用CSS装饰图片_新勺网| 专注于引进国外设计资源和设计酷站_ on 2009/12/27 at 11:02

    [...] Xiaorsz’s |自述： 一个小小的互联网及电脑技术的爱好者，联系方式： Mail & Gtalk & MSN：xiaorsz@gmail.com 出处地址：Xiaorsz’s Blog [...]

Post a Comment

（必填）

（必填，有回复时方便邮件通知）

（可不填，填了方便回访）

Sharing technology, recording life