在 <img> 元素中隐藏 src 图像，但显示其背景图像答案

【问题标题】：Hide the src image in an <img> element, but show its background image在 <img> 元素中隐藏 src 图像，但显示其背景图像
【发布时间】：2013-08-31 03:18:09
【问题描述】：

我有一个图像元素，我使用 CSS 添加了不同的背景图像。

img {
  background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
}

&lt;img src="http://i.stack.imgur.com/smHPA.png" /&gt;

我想在图像元素中显示 CSS 指定的背景图像 (the Stack Exchange logo)，而不是由 src 属性 (the Stack Overflow logo) 指定的图像。

这可能吗？我遇到无法更改 HTML 或使用 JavaScript 的情况，正在寻找替代方案。

【问题讨论】：

标签： css

【解决方案1】：

您可以替换图像并向图像添加类以赋予其背景。

img {
    position:relative;
    left:-99999px;
}
.background{
    width : 300px;
    height : 300px;
    background-image: url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
    position: relative;
    overflow: hidden;
    left:0;
}

【讨论】：

【解决方案2】：

您无法更改 HTML，但可以替换图片！打开 Photoshop 并制作一个 100% 透明的图像，与源文件同名，并将其放在当前图像所在的同一目录中。

这里会发生什么？图像标签将占据空间，因为透明图像和背景图像的大小将可见:)

【讨论】：

【解决方案3】：

确保“内容”img 与您要覆盖的 img 大小相同。这比使用背景图像覆盖前景图像效果更好。

div.image:before {
  position:absolute;
   content:url(http://placehold.it/350x150);
}

感谢几年前的这篇帖子https://stackoverflow.com/a/10833692/3247527

【讨论】：

【解决方案4】：

这应该可以工作

你的图片在这里

<img src="http://i.stack.imgur.com/smHPA.png" />

假设它的高度是100px，宽度是200px

那么你的css样式表应该是这样的

img{
    display: block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width:200px;
    height:100px;
    padding-left:200px;
    background:url('http://i.stack.imgur.com/5eiS4.png') no-repeat;
   }

基本上你要做的就是先插入 border-box 属性然后提供等于图像宽度的左内边距

【讨论】：

【解决方案5】：

The object-position CSS property，Chrome 和 Firefox 都支持，为这个问题提供了一个相当直接的解决方案。该属性用于偏移原生图像在其元素内的渲染位置。该规范有用地指出...

框的未被替换元素覆盖的区域将显示元素的背景。

...所以只要我们提供一个偏移量来确保原生图像完全越界，那么背景将是可见的。例如：

img {
  object-position: -99999px 99999px;
  background-image: url('http://i.stack.imgur.com/5eiS4.png');
}

&lt;img src="http://i.stack.imgur.com/smHPA.png" /&gt;

【讨论】：

Opera 也支持（前缀从 v11.6 到 v19），IE 或 Safari 不支持。

【解决方案6】：

我发现了一个适用于所有主要浏览器的解决方案（在 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;
}

&lt;img src="http://i.stack.imgur.com/smHPA.png"/&gt;

它有一些技巧。您必须将图像的实际宽度和高度作为宽度和高度。然后将填充左侧和顶部分别设置为该宽度和高度。我不知道溢出是否相关，但只是添加了它。 box-sizing 必须是border-box。

编辑：解决方案更简单。 padding-left 或padding-top 之一就足够了，不需要overflow:hidden。 Fiddle 与它。

【讨论】：

我建议直接在img 标记中指定height 和width 属性。这需要再次添加overflow:hidden。此外，如果用作背景的图像小于实际图像，最好设置background-position 和background-repeat 属性。

【解决方案7】：

不要使用图片。将div 与背景图片一起使用

<img> 是一个 HTML 标签。 CSS 是为它添加样式，而不是更改它的属性。下面提到的是一种解决方法。我不会推荐它。不是很干净的方法。

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            .style2{background:url('bg.jpg') 0 0 repeat !important;}
        </style>
    </head>
    <body>
        <div style="background:url(img.png) 0 0; width:728px; height:90px;" class="style2" />
    </body>
</html>

【讨论】：

请注意，4 个前导空格使您的文本被格式化为代码。删除它们以使您的文本显示为文本而不是格式化为 HTML 源代码。

【解决方案8】：

这在每个浏览器中都不可能，但在 WebKit 和 Blink 浏览器（如 Safari 和 Chrome）中，可以通过使用 content 属性替换 @987654323 的 src 指定的图像内容来完成@ 元素。用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');
}

&lt;img src="http://i.stack.imgur.com/smHPA.png" /&gt;

【讨论】：

@lrtad 我记得在某处读到 content 属性仅对 ::before 和 ::after 伪元素有效，根据 CSS3 规范。