我有一个图像元素，我已经使用CSS添加了不同的背景图像。
img {
background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
}
<img src="http://i.stack.imgur.com/smHPA.png" />
我想在图像元素中显示CSS指定的背景图像(the Stack Exchange logo)，而不是由src属性(the Stack Overflow logo)指定的图像。
这可能吗？我有一种情况，我不能改变HTML或使用JavaScript，并寻找替代品。
解决方法
我发现一个解决方案适用于所有主流浏览器(在IE8中测试)，试图用强力。
img {
background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
position: relative;
overflow: hidden;
width: 32px;
height: 36px;
padding: 32px 36px 0 0;
Box-sizing: border-Box;
}
<img src="http://i.stack.imgur.com/smHPA.png"/>
它有一些技巧。您必须将图像的实际宽度和高度作为宽度和高度。然后分别将填充左侧和上侧设置为该宽度和高度。我不知道溢出是否相关，但只是添加它。盒子大小必须是边框。
编辑：解决方案更小。 padding-left或padding-top之一就足够了，不需要溢出：hidden。 Fiddle与它。
