使用HTML5就可以了:)

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

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

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

为了重申之前的解决方案并强调纯CSS实现，这里是我的答案。

如果您从另一个站点获取内容，因此无法控制所交付的HTML，则需要使用纯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);
}

如果您试图根据项目的上下文动态地在按钮中添加图像，可以使用?参数用于根据结果引用源。这里我使用mvvm设计让我的模型。相位[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")"/>     

使用HTML5就可以了:)

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

我发现了一个比建议的解决方案更好的方法，但它确实使用了背景图像。 兼容方法(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 */

}