img元素的content属性

Question

在检查Chrome Dev工具时，我注意到以下CSS片段：

img {
    content: url(image-src.png);
}

在Chrome中完美运行（请参阅下面的屏幕截图）。

这允许我定义＆lt; img＆gt;的src属性。通过CSS标记。在Firefox中不起作用。到目前为止，我认为不可能通过css直接修改src属性，我没有找到任何人谈论这个。 那么，这只是Chrome中的一个专有添加内容，还是Chrome实施W3C草案或类似我不知道的内容？

Answer 1

The content property as defined in CSS 2.1仅适用于:before和:after个伪元素。通过CSS规则，您可以为任何元素指定任何属性，但规范对“适用于”（即对各种元素产生影响）的属性有限制。

工作草案CSS3 Generated and Replaced Content Module将content property描述为适用于所有元素。它有一个用图像替换h1元素内容的示例，对img元素也可以这样做。

但这只是一份工作草案。 CSS实施状态的常用资源QuirksMode.org CSS info和Caniuse.com并未表明情况;他们只描述content和:before对:after的支持（除了IE 7及更早版本之外，它是相当通用的。

Answer 2

现在您可以这样做： http://chabada.esy.es/tests/0004.html

<style>
  .redcross {
    background: transparent url('redcross.png') no-repeat;
    display: block;
    width:  24px;
    height: 24px;
    }
</style>

<img class="redcross">