img元素的内容属性 [英] content attribute of img elements

问题描述

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

  img {
 content：url （image-src.png）; 
} 
  

b
$ b

这允许我定义< img>的src属性。标签通过CSS。在Firefox中不起作用。直到现在我认为是不可能直接修改src属性通过css和我没有找到任何人谈论这个。 所以，这只是Chrome中的一个专有的添加项，还是Chrome实现了W3C草稿或类似的东西，我不知道。

解决方案

content ：定义在CSS 2.1 适用于：before 和：after 仅元素。通过CSS规则，您可以为任何元素指定任何属性，但规范对于适用于（即影响）各种元素的属性有限制。

CSS3生成和替换的内容模块，工作草案，描述了 content 属性应用于所有元素。它有一个例子，用图像替换 h1 元素的内容，并且可以对 img 元素。

但它只是一个工作草案。有关CSS实施状态的常见资源， QuirksMode.org CSS信息和 Caniuse.com ，不指示情况;他们只描述对：之前的内容和之后的 c>（除了IE 7和更早版本之外，它是相当普遍的。

While inspecting the Chrome Dev tools, I noticed the following CSS fragment:

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

which works perfectly in Chrome (see Screenshot below).

This allows me to define the src attribute of an <img> tag via CSS. Doesn't work in Firefox. Until now I thought that is not possible to directly modify the src attribute via css and I have not found anyone talking about this. So, is this just a proprietary addition in Chrome or is Chrome implementing a W3C draft or something comparable I am not aware of?

解决方案

The content property as defined in CSS 2.1 applies to :before and :after pseudo-elements only. By CSS rules, you can specify any property for any element, but specifications have limitations on what properties "apply to" (i.e., have effect on) various elements.

The CSS3 Generated and Replaced Content Module, a Working Draft, describes the content property as applying to all elements. It has an example of replacing the content of an h1 element by an image, and surely the same could be done to an img element.

But it’s just a Working Draft. The usual resources on CSS implementation status, QuirksMode.org CSS info and Caniuse.com, do not indicate the situation; they only describe the support to content for :before and :after (which is rather universal except IE 7 and earlier.

这篇关于img元素的内容属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！