有没有可能在CSS中设置一个img标签的src属性的等价物？
有没有可能在CSS中设置src属性值？ 目前我正在做的是：
<img src="pathTo/myImage.jpg"/>
我希望它是这样的东西
<img class="myClass" />
.myClass { some-src-property: url("pathTo/myImage.jpg");
我想这样做， 而不使用CSS中的background或background-image:属性。
使用content:url("image.jpg") 。
完整的工作解决方案（ 现场演示 ）：
<!doctype html> <style> .MyClass123{ content:url("http://imgur.com/SZ8Cm.jpg"); } </style> <img class="MyClass123"/>
有一个我今天发现的解决方案（工作在IE6 +，FF，Opera，Chrome）：
<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
怎么运行的：
- 图像被缩小，直到不再被宽度和高度可见。
- 然后，你需要“重置”图像大小; 那里我使用填充（这一个给16×16图像，当然，你可以使用填充左/填充顶部做矩形图像）
- 最后，新的图像放在那里使用背景
它也适用于提交输入图像，他们保持可点击。
查看现场演示： http ： //www.audenaerde.org/csstricks.html#imagereplacecss
请享用！
从CSS设置图像的可能方法的集合
CSS2的:after CSS3 :after伪元素或更新的语法::after以及content:属性：
第一个W3C推荐： 级联样式表，2级CSS2规范 1998年5月12日
最新的W3C建议： 选择器级别3 W3C建议 2011年9月29日
该方法在元素的文档树内容之后 追加内容。
注意：有些浏览器直接通过一些元素选择器直接渲染content属性，甚至忽略了最新的W3C建议：
适用于：
:before和:after伪元素
CSS2语法（向前兼容）：
.myClass:after { content: url("somepicture.jpg"); }
CSS3选择器：
.myClass::after { content: url("somepicture.jpg"); }
默认呈现： 原始大小 （不依赖于显式大小声明）
本规范并没有完全定义：before和after之后的替换元素（如HTML中的IMG）的交互。 这将在未来的规范中更详细地定义。
但即使在写这篇文章的时候，一个<IMG>标签的行为仍然没有被定义，虽然它可以被黑客和非标准兼容的方式 使用，但不推荐使用<img> ！
很好的候选方法，看看结论…
CSS1的background-image:属性：
第一个W3C推荐： 级联样式表，1级 1996年12月17日
该属性设置元素的背景图像。 设置背景图像时，还应设置背景颜色，在图像不可用时使用。 当图像可用时，它被覆盖在背景颜色的顶部。
这个属性从CSS开始就已经存在了，但是值得一提的是它。
默认渲染： 原始大小 （不能缩放，只能定位）
但是 ，
通过允许多个缩放选项， CSS3的background-size:属性得到了改进：
最新的W3C状态： 候选推荐 CSS背景和边界模块级别3 2014年9月9日
[length> | <percentage> | auto ]{1,2} | cover | contain
但即使有这个属性，这取决于容器的大小。
仍然是一个很好的候选方法，看到结论…
CSS2的list-style:属性以及display: list-item ：
第一个W3C推荐： 级联样式表，2级CSS2规范 1998年5月12日
list-style-image:属性设置将用作列表项标记的图像（项目符号）
列表属性描述列表的基本视觉格式：它们允许样式表指定标记类型（ 图像 ，字形或数字）
display: list-item – 这个值会导致一个元素（例如HTML中的<li> ）生成一个主体块和一个标记框。
.myClass { display: list-item; list-style-position: inside; list-style-image: url("someimage.jpg"); }
速记CSS：（ <list-style-type> <list-style-position> <list-style-image> ）
.myClass { display: list-item; list-style: square inside url("someimage.jpg"); }
默认呈现： 原始大小 （不依赖于显式大小声明）
限制：
-
继承将将OL和UL元素的“列表样式”值转换为LI元素。 这是指定列表样式信息的推荐方法。
-
他们不允许作者为列表标记指定不同的样式（颜色，字体， 对齐等）或调整其位置
这种方法也不适用于<img>标签，因为不能在元素类型之间进行转换，这里是有限的，不兼容的黑客 ，不能在Chrome上运行。
好的候选方法，看结论…
CSS3的border-image:属性推荐 ：
最新的W3C状态： 候选推荐 CSS背景和边界模块级别3 2014年9月9日
一种背景类型的方法，它依赖于以一种相当特殊的方式（没有为这个用例定义）指定尺寸以及到目前为止的回退边界属性（例如border: solid ）：
请注意，即使它们从来不会产生滚动机制，也可能会由祖先或视口剪切起始图像。
这个例子说明了图像只是作为一个右下角的装饰 ：
.myClass { border: solid; border-width: 0 480px 320px 0; border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0; }
适用于：所有元素，除了内部表格元素时
border-collapse: collapse
它仍然不能改变一个<img>的标签src （但这是一个黑客 ），而不是我们可以装饰它：
.myClass { border: solid; border-width: 0 96px 96px 0; border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png") 0 100% 100% 0; }
<img width="300" height="120" src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg" class="myClass"
我用这个CSS的空分区解决方案：
#throbber { background-image: url(/Content/pictures/ajax-loader.gif); background-repeat: no-repeat; width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
HTML：
<div id="throbber"></div>
他们是对的。 IMG是一个内容元素，CSS是关于设计的。 但是，如何使用某些内容元素或属性进行设计呢？ 我有我的网页IMG，如果我改变风格（CSS）必须改变。
那么这是一个定义IMG演示文稿（没有真正的形象）在CSS风格的解决方案。
- 创建一个1×1透明的GIF或PNG。
- 将IMG的propery“src”分配给该图像。
- 用CSS样式中的“background-image”定义最终的演示文稿。
它像一个魅力:)
我发现比提出的解决方案更好的方法，但确实使用背景图像。 符合方法（无法确认IE6）版权： http : //www.kryogenix.org/code/browser/lir/
<img src="pathTo/myImage.jpg"/>
CSS：
img[src*="pathTo/myImage.jpg"] { background-image: url("mynewimg.jpg"); /* lets say 20x20 */ width: 20px; display:inline-block; padding: 20px 0 0 0; height: 0px !important; /* for IE 5.5's bad box model */ height /**/:20px; }
旧的形象没有看到，新的如预期的那样。
以下简洁的解决方案仅适用于webkit
img[src*="pathTo/myImage.jpg"] { /* note :) */ content:''; display:inline-block; width: 20px; height: 20px; background-image: url("mynewimg.jpg"); /* lets say 20x20 */ }
这是一个非常好的解决方案 – > http://css-tricks.com/replace-the-image-in-an-img-with-css/
Pro（s）和Con（s）：
（+）与具有相对宽度/高度的矢量图像（ RobAu的答案无法处理的东西）
（+）是跨浏览器（也适用于IE8 +）
（+）它只使用CSS。 所以不需要修改img src（或者如果你没有访问/不想改变已经存在的img src属性）。
（ – ）对不起，它确实使用了背景css属性:)
您可以在HTML代码中定义2个图像并使用display: none; 决定哪一个将是可见的。
不，你不能通过CSS设置图像的src属性。 就像你所说，最接近的就是background或background-image 。 我不会推荐这么做，因为这有点不合逻辑。
但是，如果您的目标浏览器能够使用它，则可以使用CSS3解决方案。 使用Pacerier的答案中描述的 content:url 。 您可以在下面的其他答案中找到其他跨浏览器的解决方案。
据我所知，你不能。 CSS是关于风格和图像的src是内容。
把几个图像放在“控制”容器中，然后改变容器的类。 在CSS中，添加规则来管理图像的可见性取决于容器的类。 这将产生与更改单个图像的img src属性相同的效果。
HTML：
<span id="light" class="red"> <img class="red" src="red.png" /> <img class="yellow" src="yellow.png" /> <img class="green" src="green.png" /> </span>
CSS：
#light { ... } #light * { display: none; } // all images are hidden #light.red .red { display: inline; } // show red image when #light is red #light.yellow .yellow { display: inline; } // .. or yellow #light.green .green { display: inline; } // .. or green
请注意，它将预加载所有的图像，像CSS backround-image ，但不像通过JS更改img src 。
重申一个先前的解决方案，并强调这里纯粹的CSS实现是我的答案。
如果您从其他站点获取内容，则需要使用纯CSS解决方案，因此您无法控制交付的HTML。 在我的情况下，我试图删除授权源内容的品牌，以便授权人不必为他们购买内容的公司做广告。 因此，我在保留其他所有内容的同时删除了他们的徽标 我应该注意到，这是在我的客户的合同内这样做。
{ /* image size is 204x30 */ width:0; height:0; padding-left:102px; padding-right:102px; padding-top:15px; padding-bottom:15px; background-image:url(http://sthstest/Style%20Library/StThomashttp://img.dovov.comrhn_nav_logo2.gif); }
另一种方式
.myClass { background: url('/img/loading_big.gif'); }
<div class="myClass"></div>
我知道这是一个非常古老的问题，但没有答案提供了为什么永远不能做的正确推理。 虽然你可以“做”你正在寻找的东西，但你不能以有效的方式去做。 为了有一个有效的img标签，它必须具有src和alt属性。
所以任何一个给出了一个不使用src属性的img标签的方法都会促进使用无效的代码。
简而言之：您所要查找的内容不能在语法结构中合法地完成。
来源：W3验证
如果你不想设置背景属性，那么你不能只使用CSS设置图像的src属性。
或者，你可以使用JavaScript来做这样的事情。
使用CSS，它不能完成。 但是，如果你正在使用JQuery，像这样的事情将会诀窍：
$("img.myClass").attr("src", "http://somwhere");
或者你可以做到这一点，我发现interweb thingy。
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
<img src="linkToImage.jpg" class="egg"> .egg { width: 100%; height: 0; padding: 0 0 200px 0; background-image: url(linkToImage.jpg); background-size: cover; }
所以有效地隐藏图像并填充背景。 哦，什么黑客，但如果你想要一个IMG标签替代文字和背景，可以扩展而不使用JavaScript？
在我正在做的一个项目中，我创建了一个英雄块树枝模板
<div class="hero"> <img class="image" src="{{ bgImageSrc }}" alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});"> </div>
你可以用JS转换它：
$('.image-class').each(function(){ var processing = $(this).attr('src'); $(this).parent().css({'background-image':'url('+processing+')'}); $(this).hide(); });
如果您正在尝试基于项目的上下文动态地在按钮中添加图像，则可以使用？ 根据结果参考来源。 在这里，我正在使用mvvm设计让我的Model.Phases [0]值确定是否希望我的按钮根据灯相位的值打开或关闭灯泡图像。
不知道这是否有帮助。 我使用的是JqueryUI，Blueprint和CSS。 类定义应该允许你根据你想要的来设计按钮的样式。
<button> <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/> <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/> <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
我会补充一点：背景图像也可以用background-position: xy; （x水平y垂直）。 （..）我的情况，CSS：
(..) #header { height: 100px; background-image: url(http://.../head6.jpg); background-position: center; background-repeat: no-repeat; background-color: grey; (..) } (...)
HTMl代码：
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="css destination" /> </head> <body> <!-- click-able pic with link --> <a href="site you want"> <!-- Take the off if you don't want click-able link --> <h1 id(or class)="nameOfClassorid"> <span>Text that is not important</span> </h1> </a> </body> </html>
Css代码：
span { display: none; } h1 id or class { height: of pic; width: of pic; /* Only flaw (so far) read bottom */ background-image:url(/* "image destination" */); } h1 id or class:hover { /* Now the awesome part */ background-image:url(/* 'new background!!!' */); }
我放学几天后一直在学html，想知道怎么做。 找出背景，然后把2和2放在一起。 这工作100％，我检查，如果不是确保你填写必要的东西！ 我们需要指定高度，因为没有它就没有什么了！ 我将离开这个你可以加载的基本shell。
例：
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <a href="http:localhost"> <h1> <span>Text that is not important</span> </h1> </a> </body> </html> span { display: none; } h1 { height: 100px; width: 100px; background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/Ubuntu-Desktop-@-2011-01-11-191526-300x225.png"); } h1:hover { height: 300px; width: 300px; background-image:url("http://cdn.css-tricks.comhttp://img.dovov.comads/wufoo-600x600-red.png"); }
PS是的，我是一个Linux用户;）
任何基于background或background-image方法在用户打印禁用“打印背景颜色和图像 ”文档时可能会失败。 这不幸是典型的浏览器的默认值。
这里唯一的兼容打印和跨浏览器的方法是由Bronx提出的方法。
只需使用HTML5 🙂
<picture> <source srcset="smaller.jpg" media="(max-width: 768px)"> <source srcset="default.jpg"> <img srcset="default.jpg" alt="My default image"> </picture>
