惊叹于老外的发现 《CSS Background image on html image element?》,自己从没关注过,也没想过如此的问题。

实现方法很简单:设置 img 元素为块元素(display:block;),并赋一个 padding 值。

例如(simple demo ):

img {
    display:block;
    background:url('parallax.gif') no-repeat bottom left;
    padding:93px 100px 75px 100px;
}

根据上面的原理,举一反三,通过类似的方法,我们还可以给 img 元素设置双边:

img {
    display:block;
    padding:1px;
    background:red;
    border:1px solid black;
}


共有38 条评论

  1. 1. 头像 爆牙齿

    不会吧,这么古老的东西也需要惊叹老外的“发现”……

  2. 2. 头像 s5s5

    img的padding在IE的怪异模式下不生效……

  3. 3. 头像 POPOEVER

    靠,一直在这么干,我以为天下皆知的秘密

  4. 4. 头像 达达

    Good!
    在相册浏览,产品展示中的确有意想不到的效果!:)

  5. 5. 头像 冷韵

    我一直用img的background定义一些小图标的

  6. 6. 头像 怿飞

    –!看来是我落伍了。

  7. 7. 头像 v

    囧…

  8. 8. 头像 mental

    很新奇的想法啊

  9. 9. 头像 roc

    IE8中这样的图片背景似乎有点问题,作为img元素背景图的gif动画无法应用到padding撑开的区域,只能限定在img元素本身大小的“盒子”里~

  10. 10. 头像 mental

    呵呵

  11. 11. 头像 郊区土匪

    还是没想明白.IMG设置背景意义何在呢??直接做成一张图片不行吗?

  12. 12. 头像 怿飞

    @s5s5 是的,但现在页面很少有怪异模式了,除非特殊情况

  13. 13. 头像 dimlau

    IE5.5 & IE8b2
    有问题

  14. 14. 头像 ice

    哈哈,太神奇了,还真不知道可以这样用。

  15. 15. 头像 dexbol

    youtube用这个很到位

  16. 16. 头像 DeadFire

    这个确实有点不值一提了,而且block不block好像也没啥关系的。

    不过列子还是很不错的。

  17. 17. 头像 EmBlem

    例子有点意思….哈哈

  18. 18. 头像 沙漠

    没看懂是什么意思?不过确实是不是什么新的东西!

  19. 19. 头像 怿飞

    @DeadFire 虽然padding但对置换元素img是可用的,但block后更好。技巧是很简单,但简单的不一定没有价值。

  20. 20. 头像 linxz

    呃……想说啥呢。在标准模式下一直这么用,IE5.5从来没有考虑过,所以也抛弃怪异模式下的情况。如果真要考虑怪异模式的话,那就只能借助其他标签辅助了。

  21. 21. 头像 锐风

    貌似我亿万年前就做过这个了.

  22. 22. 头像 卢子嘉

    我还是第一次听说,看来我太落伍了。

  23. 23. 头像 NetPuter

    我也才发现..有演示否?

  24. 24. 头像 xss

    赞!
    设置双边那个例子,我更倾向外围一个a标签,结合img来实现双边框,好处在于2个边框的距离可以完全自定义,不会挨在一起。

  25. 25. 头像 smoke520

    有点落后了,也是才知道。

  26. 26. 头像 zuozuo

    貌似我亿万年前就做过这个了.我同意这观点

  27. 27. 头像 rage

    被鄙视了吧! 哈哈哈哈哈哈哈

  28. 28. 头像 Leeiio

    @NetPuter http://www.contentwithstyle.co.uk/resources/img_bg_demo/ 這個便是演示,我也落伍了,剛聽說。

  29. 29. 头像 Fufu

    嗯,用过这个,像平时做图片列表有个背景样式比较方便。

  30. 30. 头像 km268

    經常不自覺把img設置為block,可沒想到這個用處。感覺用到webgame中很不錯;做ad也很好用

  31. 31. 头像 yuyangvi

    这个在FCK上有应用。因为点击img和表单元素不会失去原来的焦点。所以用这个方法既可以保证原有的字段被选中,又能把图标放在一张图片上加速。

  32. 32. 头像 1205号木匣子

    不会吧,这么古老的东西也需要惊叹老外的“发现”……

  33. 33. 头像 Gabriel

    图片的src设为一张宽高都是1px的空白gif,然后就可以通过CSS控制背景、高宽等,在做一些小图标时可以很方便地控制

  34. 34. 头像 54ui

    囧~~~我也刚知道~~~看来时代的步伐太快~~要加快紧追了啊~~
    谢谢怿飞的分享,要不我们这些不知道的仍然还是不知道~~~

  35. 35. 头像 挖客

    图片这样嵌套道很少这样用
    不过img加边框,相信大家都经常这么做
    呵呵

  36. 36. 头像 Mask

    这个有点意思,我以前也不知道

  37. 37. 头像 股吧

    绝!!!这也行!!!

  38. 38. 士气低靡,娱乐一下吧。发个产品列表显示方案。 - web前端 - 开发者问答

    […] 对了,版主怿飞以前发布过一篇文章:可以给img元素设置背景图 本条目发布于 2010 年 3 月 4 日。属于 web前端 分类。作者是 […]

发表评论

(必填)

(必填,会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签