html - 在CSS,等价设置img标记的src属性?

是否可以在CSS中设置src属性值?


<img src="pathTo/myImage.jpg"/>

我希望它像这样


<img class="myClass" />


.myClass {
 some-src-property: url("pathTo/myImage.jpg");

不使用background的或background-image:属性的情况下。

时间:

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

完整的工作解决方案(Live Demo ):


<!doctype html>

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

<img class="MyClass123"/>

测试过可以工作:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

测试过不工作:

  • Firefox 34.0.5
  • IE 11.0.960 0.174 98

我今天发现了一个解决方案(适用于IE6+,FF,Opera,Chrome ):

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

它的工作方式:

  • 图像会缩小,直到宽度和高度不再可见;
  • 然后,你需要'重置'的图像大小; 在那里我使用padding (这给出了16x16的图像,当然,你可以使用padding-left padding top制作矩形图像),
  • 最后,使用background新的图像

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

enjoy!

我使用了空的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>

将几个图像放入"控制"容器中,而改变容器的类,在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不同。

...