使用内容:url(“image.jpg”)。

完整的工作方案(现场演示):

<！doctype html > <时尚> .MyClass123 { 内容:url(“http://imgur.com/SZ8Cm.jpg”); ｝ > < /风格 < img类= " MyClass123 " / >

测试和工作:

Chrome 14.0.835.163 Safari你 Opera 10.6 Firefox 100及更新版本

已测试且不工作:

FireFox 40.0.2(观察开发人员网络工具，您可以看到URL加载，但图像不显示) Internet Explorer 11.0.9600.17905 (URL从未加载)

不，你不能通过CSS设置图像src属性。你能得到的最接近的是，如你所说，背景或背景图像。我不建议这样做，因为这有点不合逻辑。

但是，如果你的目标浏览器能够使用CSS3解决方案，那么你可以使用它。请使用Pacerier回答中描述的content:url。您可以在下面的其他答案中找到其他跨浏览器的解决方案。

使用CSS，这是做不到的。但是，如果你正在使用JQuery，像这样的东西可以做到:

$("img.myClass").attr("src", "http://somwhere");

或者你也可以这样做我在网上找到的。

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标签与alt文本和背景，可以不使用JavaScript缩放?

在我现在正在做的一个项目中，我创建了一个英雄块树枝模板

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>

我想补充一点:背景图像也可以用background-position: x - y来定位;(x水平y垂直)。(. .) 我的例子，CSS:

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)

我使用了空的div解决方案，与这个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>