我有一个图像元素，我已经使用CSS为其添加了不同的背景图像。隐藏<img>元素中的src图像，但显示其背景图像
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，并且正在寻找替代品。
请勿使用图像。使用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>
这是不可能在每一个浏览器，但在WebKit和闪烁的浏览器（如Safari和Chrome），它可以通过使用content属性以替换src来完成 - <img>元素的指定图像内容。使用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" />这项工作在铬，但不是在Firefox和即 – lrtad
好戏法。非常有用的铬和Safari浏览器。 –
@lrtad我记得在某些地方，根据CSS3规范，content属性只对':: before'和':: after'伪元素有效。 –
The object-position CSS property，这是由Chrome和Firefox的支持，提供了一个相当直接的解决了这个问题。该属性用于抵消其元素内原生图像的渲染位置。规范有助于指出...
未被替换的元素覆盖的框的区域将显示元素的背景。
...所以只要我们提供一个偏移量，以确保本机图像将完全超出界限，背景将是可见的。例如：
img {
object-position: -99999px 99999px;
background-image: url('http://i.stack.imgur.com/5eiS4.png');
}<img src="http://i.stack.imgur.com/smHPA.png" />我发现蛮力试图在所有主流浏览器的解决方案（以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与它。
我建议直接在'img'标签中指定'height'和'width'属性。这需要再次添加“overflow：hidden”。另外，如果用于背景的图像小于实际图像，则设置“背景位置”和“背景重复”属性可能是一个想法。 – Shaggy
这应该工作
您的图像是在这里
<img src="http://i.stack.imgur.com/smHPA.png" />
假设其高度为100像素和宽度为200像素
那么你的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;
}
基本上你所要做的，只需要插入边界框财产，然后再提供左填充等于图像
做出的宽度确保“内容” IMG是大小相同img你正在掩盖。这比使用背景图像覆盖前景图像更好。
div.image:before {
position:absolute;
content:url(http://placehold.it/350x150);
}
你不能改变HTML，但你可以替换图像！ 打开Photoshop并制作一个100％透明的图像，其名称与源代码相同，并放在当前图像所在的目录中。
这里会发生什么？图像标签将占据空间，因为透明图像和背景图像的大小将可见:)
请注意，4个前导空格使您的文本被格式化为代码。将它们移除以便将文本显示为文本并且不将其格式化为HTML源文件。 – Artemix