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草稿或者我不知道的类似项目。
内容
属性定义在CSS 2.1 适用于:之前
和:之后
伪元素。通过CSS规则,您可以为任何元素指定任何属性,但规范对于适用于(即影响)各种元素的属性有限制。
CSS3生成和替换的内容模块,工作草案,描述了 content
属性应用于所有元素。它有一个例子,用图像替换 h1
元素的内容,并且肯定可以对 img
元素。
但它只是一个工作草案。关于CSS实施状态的常见资源, QuirksMode.org CSS信息和 Caniuse.com ,不指示情况;他们只描述对:之前
和
:之后对
content
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屋!