隐藏<img>元素中的源图像，但显示其背景图像
隐藏<img>元素中的源图像，但显示其背景图像
提问于 2013-08-28 15:01:08
我有一个图像元素，我使用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)。
这个是可能的吗？我有一种情况，我不能改变超文本标记语言或使用JavaScript，并正在寻找替代方案。
回答 5
Stack Overflow用户
发布于 2016-05-11 15:47:03
我发现了一种可以在所有主流浏览器中使用的解决方案(在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中的一个就足够了，不需要overflow:hidden。Fiddle使用它。
Stack Overflow用户
发布于 2013-08-28 15:35:53
这并不是在所有浏览器中都可能实现，但在WebKit和Blink浏览器(如Safari和Chrome)中，可以通过使用content属性替换<img>元素的src-specified图像内容来实现。使用content: none来完全移除它似乎不起作用，但我们可以用一个透明的GIF来代替它来达到同样的效果。
这将更改图像的固有尺寸(在本例中为1x1 )，因此您还需要添加一个显式的width和height (如果尚未指定)。
img {
content: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
width: 32px;
height: 36px;
background-image: url('http://i.stack.imgur.com/5eiS4.png');
}<img src="http://i.stack.imgur.com/smHPA.png" />
Stack Overflow用户
发布于 2016-05-14 08:07:55
确保“内容”img与你所遮盖的img的大小相同。这比使用背景图像来覆盖前景图像效果更好。
div.image:before {
position:absolute;
content:url(http://placehold.it/350x150);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18481310
复制相关文章
相似问题