通过 CSS 显示图像而不是 url

Question

我有：

<a href="/media/media/about-logo.png">media/about-logo.png</a>

我能做到：

a { content: url(/media/media/about-logo.png); }

我需要：

a { content: url( attr(href) ); }

这不起作用。

我需要 css 将文本放入 href 并将其用作 url，无需对其进行硬编码。

Answer 1

使用纯 CSS 和 HTML 无法实现此目的。您需要使用 JavaScript。为了简单起见，我在这里使用 jQuery。

$("a").each(function () {
   $(this).css('content', 'url('+$(this).attr('href')+')');
});

虽然在这一点上，您也可以只使用 .text，它会产生相同的结果。

$("a").each(function () {
   $(this).text($(this).attr('href'));
});

Show image instead of url via CSS