是否可以在CSS中设置img标签的src属性的等效项？

只需使用HTML5 :)

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>

当用户在禁用“打印背景色和图像 ”的情况下打印文档时，任何基于background或background-image可能失败的方法。不幸的是，这是典型浏览器的默认设置。

这里唯一的打印友好和跨浏览器兼容的方法是Bronx提出的方法。

如果您尝试根据项目的上下文动态在按钮中添加图像，则可以使用？。根据结果​​参考来源。在这里，我正在使用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: x y;（x水平y垂直）定位。（..）我的案例，CSS：

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

如果您不想设置背景属性，则不能仅使用CSS设置图像的src属性。

或者，您可以使用JavaScript来执行此操作。

使用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标签以及无需使用JavaScript即可缩放的背景？

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

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

我知道这是一个非常老的问题，但是没有答案提供了永远无法做到这一点的正确理由。尽管您可以“做”正在寻找的东西，但是您不能以有效的方式来做。为了拥有有效的img标签，它必须具有src和alt属性。

因此，提供不使用src属性的img标签来实现此目的的任何答案都在促进使用无效代码。

简而言之：您要查找的内容无法在语法结构内合法完成。

资料来源：W3验证器

据我所知，您不能。CSS是关于样式的，图像的src是内容。

我的答案是重申先前的解决方案并强调纯CSS实现。

如果您要从另一个站点采购内容，因此您无法控制所提供的HTML，则需要Pure CSS解决方案。就我而言，我试图删除许可源内容的品牌，以便被许可方不必为他们购买内容的公司做广告。因此，我在保留所有其他内容的同时删除了他们的徽标。我应该注意，这是在客户的合同范围内。

{ /* 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/StThomas/images/rhn_nav_logo2.gif);
}

不，您不能通过CSS设置image src属性。如您所说，最接近的是background或background-image。我不建议这样做，因为这样做有点不合逻辑。

但是，如果您要定位的浏览器可以使用CSS3解决方案，则可以使用它。content:url 按照Pacerier的回答中所述使用。您可以在下面的其他答案中找到其他跨浏览器的解决方案。

将多个图像放入“控制”容器中，然后更改容器的类。在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，但与img src通过JS进行更改不同。

您可以在HTML代码中定义2张图片，并用于display: none;确定哪一张图片可见。

这是一个非常好的解决方案-> http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro和Con：
（+）与vector一起使用具有相对宽度/高度（RobAu的答案无法处理）
（+）的图像是跨浏览器（对于IE8 +也适用）
（+），它仅使用CSS。因此，无需修改img src（或者如果您没有访问权限/不想更改已经存在的img src属性）。
（-）抱歉，它确实使用了背景CSS属性：)

他们是对的。IMG是一个内容元素，而CSS是关于设计的。但是，当您出于设计目的使用某些内容元素或属性时呢？我的网页上都有IMG，如果我更改样式（CSS），则必须更改。

好吧，这是一种以CSS样式定义IMG表示形式（实际上不是图像）的解决方案。

1. 创建一个1x1透明gif或png。
   
2. 为该图像分配IMG的属性“ src”。
   
3. 使用CSS样式中的“背景图像”定义最终演示。
   

它就像一个魅力:)

我用这个CSS使用了空的div解决方案：

#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>

使用content:url("image.jpg")。

完整的工作解决方案（Live Demo）：

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

经过测试和工作：

• 铬14.0.835.163
• Safari 4.0.5
• Opera 10.6

经过测试，无法正常工作：

• FireFox 40.0.2（观察开发人员网络工具，您可以看到已加载URL，但未显示图像）
• Internet Explorer 11.0.9600.17905（URL永远不会加载）