img 元素的内容属性

Posted 2023-02-21

【中文标题】img 元素的内容属性

【英文标题】：content attribute of img elements

【发布时间】：2012-06-25 19:16:02

【问题描述】：

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

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

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

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

【参考方案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">

【讨论】：

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