是否可以在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:属性来执行此操作。

#1楼

我今天发现了一个解决方案（可在IE6 +，FF，Opera，Chrome中运行）：

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

这个怎么运作：

图像将缩小，直到宽度和高度不再可见。
然后，您需要使用填充“重置”图像尺寸。这给出了一个16x16的图像。当然，您可以使用padding-left / padding-top制作矩形图像。
最后，使用背景将新图像放置在那里。
如果新的背景图像太大或太小，建议使用background-size ，例如： background-size:cover; 使您的图像适合分配的空间。

它也适用于提交输入图像，它们保持可点击状态。

观看现场演示： http : //www.audenaerde.org/csstricks.html#imagereplacecss

请享用！

#2楼

如果您尝试根据项目的上下文动态在按钮中添加图像，则可以使用？根据结果参考来源。在这里，我使用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")"/>

#3楼

我发现了比提出的解决方案更好的方法，但是它确实使用了背景图像。 兼容方法（无法确认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 */

}

#4楼

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

完整的工作解决方案（实时演示）：

<!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永远不会加载）

#5楼

我的答案是重申先前的解决方案并强调纯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);
}

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3158724

标签

webkit

opera

jQuery UI

blueprint

mvvm