惊叹于老外的发现 《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;
}
：
witter：
共有37 条评论
不会吧，这么古老的东西也需要惊叹老外的“发现”……
img的padding在IE的怪异模式下不生效……
靠，一直在这么干，我以为天下皆知的秘密
Good!
在相册浏览，产品展示中的确有意想不到的效果！：）
我一直用img的background定义一些小图标的
–!看来是我落伍了。
囧…
很新奇的想法啊
IE8中这样的图片背景似乎有点问题，作为img元素背景图的gif动画无法应用到padding撑开的区域，只能限定在img元素本身大小的“盒子”里~
呵呵
还是没想明白.IMG设置背景意义何在呢??直接做成一张图片不行吗?
@s5s5 是的，但现在页面很少有怪异模式了，除非特殊情况
IE5.5 & IE8b2
有问题
哈哈，太神奇了，还真不知道可以这样用。
youtube用这个很到位
这个确实有点不值一提了，而且block不block好像也没啥关系的。
不过列子还是很不错的。
例子有点意思….哈哈
没看懂是什么意思?不过确实是不是什么新的东西!
@DeadFire 虽然padding但对置换元素img是可用的，但block后更好。技巧是很简单，但简单的不一定没有价值。
呃……想说啥呢。在标准模式下一直这么用，IE5.5从来没有考虑过，所以也抛弃怪异模式下的情况。如果真要考虑怪异模式的话，那就只能借助其他标签辅助了。
貌似我亿万年前就做过这个了.
我还是第一次听说，看来我太落伍了。
我也才发现..有演示否?
赞！
设置双边那个例子，我更倾向外围一个a标签，结合img来实现双边框，好处在于2个边框的距离可以完全自定义，不会挨在一起。
有点落后了，也是才知道。
貌似我亿万年前就做过这个了.我同意这观点
被鄙视了吧！ 哈哈哈哈哈哈哈
@NetPuter http://www.contentwithstyle.co.uk/resources/img_bg_demo/ 這個便是演示，我也落伍了，剛聽說。
嗯，用过这个，像平时做图片列表有个背景样式比较方便。
經常不自覺把img設置為block，可沒想到這個用處。感覺用到webgame中很不錯；做ad也很好用
这个在FCK上有应用。因为点击img和表单元素不会失去原来的焦点。所以用这个方法既可以保证原有的字段被选中，又能把图标放在一张图片上加速。
不会吧，这么古老的东西也需要惊叹老外的“发现”……
图片的src设为一张宽高都是1px的空白gif，然后就可以通过CSS控制背景、高宽等，在做一些小图标时可以很方便地控制
囧~~~我也刚知道~~~看来时代的步伐太快~~要加快紧追了啊~~
谢谢怿飞的分享，要不我们这些不知道的仍然还是不知道~~~
图片这样嵌套道很少这样用
不过img加边框，相信大家都经常这么做
呵呵
这个有点意思，我以前也不知道
绝！！！这也行！！！