仅使用CSS控制（隐藏）图像的内容

Question

是否存在CSS hack /技术来获取<img>元素（没有其他标记）并隐藏图像的像素内容，同时仍将其显示为具有背景颜色和笔触的元素？

例如，在页面上取<img src="foo.jpg">并将其设为32x32纯色徽章。

虽然我对浏览器特定的黑客感兴趣（Webkit有固定填充效果吗？）或CSS3 awesomesauce（有image-content-opacity:0.0吗？），我需要一个适用于IE8 +的解决方案， FF4 +及其附近。

如果您对此问题的动机感兴趣，请参阅此页面的编辑历史记录。它已被删除，因为它分散了用户的注意力，试图找到解决该问题的解决方法，而不是回答这个问题。

Answer 1

隐藏图像并使用填充纯色的背景 示例http://jsfiddle.net/notme/ZUvHN/6/

Answer 2

这是我上面的评论以及notme的解决方案：

http://jsfiddle.net/ZUvHN/7/

我所做的是从display:table-cell移除a，然后将其设为display: block

然后我将img设置为display: none

这样，您就可以将边框和背景样式应用于a标记而不是img标记。你可能不得不调整边距和间距。

我不知道您是否有选项，但通过JavaScript调整HTML可能更容易。