google-chrome - img 元素的内容属性

Question

在检查 Chrome 开发工具时，我注意到以下 CSS 片段:

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

在 Chrome 中完美运行(见下面的屏幕截图)。

这允许我通过 CSS 定义 标签的 src 属性。在 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 , 不说明情况；他们只描述了对 :before 和 :after 的 content 的支持(除了 IE 7 和更早版本之外，这是相当普遍的。