一尘不染

img元素的content属性

css

在检查Chrome Dev工具时,我注意到以下CSS片段:

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

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

Chrome Dev Tools

这使我可以通过CSS定义标签的src属性。在Firefox中不起作用。到目前为止,我认为不可能通过CSS直接修改src属性,而且我还没有发现有人在谈论这一点。
那么,这仅仅是Chrome中的专有功能,还是Chrome正在实施W3C草案或其他我不知道的类似产品?


阅读 2902

收藏
2020-05-16

共1个答案

一尘不染

contentCSS 2.1中定义的属性仅适用于:before:after伪元素。根据CSS规则,您可以为任何元素指定任何属性,但是规范对“应用于”各种元素(即对各种元素有影响)的属性有所限制。

CSS3生成并替换了内容

模块(工作草稿)描述

应用时的内容属性

所有元素。它有一个替换h1元素内容的示例通过图像,当然也可以对img元素进行同样的处理。

但这只是一个工作草案。CSS实现的常用资源地位,QuirksMode.org网站CSS信息以及Caniuse.com网站,不要指明情况;它们仅描述对以下内容的支持:before和:after(即除了IE7和更早的版本之外,它是相当普遍的。

2020-05-16