CSS3 用另一个 attr 替换图像 src

Question

我的网站上有 lazyload。但是，如果有人想打印网页，那么 id 也喜欢要打印的图像，而不是加载微调器。

我的图片是这样的

<img class="lazy" data-original="images/gd-0007.jpg" src="../../img/loadingplaceholder.gif">

所以使用@media print { } 我想使 src 与原始数据相同。

试过了，但没有成功。 (在样式表中做了它以查看它是否有效)

@media print {
.lazy {
  src: attr(data-original);
 }
}

这是我的想法: http://andydavies.me/blog/2012/08/13/what-if-we-could-use-css-to-manipulate-html-attributes/

如果有帮助，这里是一个 jsfiddle: http://jsfiddle.net/gXpzb/

Answer 1

问题是，这只是作者认为有朝一日在 CSS 中拥有的东西的想法，目前不支持。

在 CSS 中没有要设置的 src 属性，而是一个 content 属性，但是它似乎不接受使用 attr( )，它似乎还没有被任何浏览器实现。从the specs来看，这样的事情在未来是可能的:

content: attr(data-original url);

另请参阅:Css Content, Attr and Url in the same sentence

因此，据我所知，您目前必须坚持在 CSS 中显式定义 URL，例如

<img class="lazy gd0006" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
<img class="lazy gd0007" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
<img class="lazy gd0008" src="http://beresponsive.net/tcex/img/loadingplaceholder.gif">
...

@media print {
    .lazy.gd0006 {
        content: url('/images/gd-0006.jpg');
    }
    .lazy.gd0007 {
        content: url('/images/gd-0007.jpg');
    }
    .lazy.gd0008 {
        content: url('/images/gd-0008.jpg');
    }
    ...
}