13

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

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

它在 Chrome 中完美运行（请参见下面的屏幕截图）。

Chrome 开发工具

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

4

2 回答 2

15

content:beforeCSS 2.1中定义的属性仅适用于:after伪元素。通过 CSS 规则，您可以为任何元素指定任何属性，但规范对哪些属性“适用于”（即，影响）各种元素有限制。

CSS3 Generated and Replaced Content Module是一个工作草案，将属性content描述为适用于所有元素。它有一个用图像替换元素内容的示例h1，当然也可以对img元素执行相同的操作。

但这只是一个工作草案。关于 CSS 实施状态的常用资源QuirksMode.org CSS info和Caniuse.com不说明情况；他们只描述了对contentfor :beforeand的支持:after（除了 IE 7 和更早版本之外，这是相当普遍的。

于 2012-06-24T05:19:28.537 回答
0

现在你可以这样做了： 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">
于 2014-08-16T10:02:51.290 回答