img 元素的内容属性答案

【问题标题】：content attribute of img elementsimg 元素的内容属性
【发布时间】：2012-06-25 19:16:02
【问题描述】：

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

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

在 Chrome 中完美运行（见下面的截图）。

这允许我通过 CSS 定义标签的 src 属性。在 Firefox 中不起作用。到目前为止，我认为不可能通过 css 直接修改 src 属性，我还没有发现有人在谈论这个。 那么，这只是 Chrome 中的一个专有添加，还是 Chrome 实现了 W3C 草案或类似的东西，我不知道？

【问题讨论】：

标签： google-chrome css image web-standards

【解决方案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 和更早版本之外，这是相当普遍的。

【讨论】：

它不仅只是一个WD，而且似乎被抛弃了。我不知道这些实现将走向何方，也不知道它们是否会完全实现这个模块。
@BoltClock，WD 自 2003 年以来一直没有工作，但在 W3C 概述文档 w3.org/Style/CSS/current-work.en.html 中，它位于“重写”部分，而不是“已废弃”。有一份 2012 年 4 月 17 日的编辑草稿，虽然我不知道它的内容与 2003 年的草稿有何关系。我希望对content 的支持让普通元素变得更加普遍；除了 Chrome，Opera 和 Safari 都已经支持了。
啊，我没看到。谢谢！

【解决方案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">

【讨论】：

但是你需要知道图片的像素尺寸，否则会被裁剪。