使用 CSS 将 Img Src 更改为父 A href

Question

是否可以将img 元素更改为其父a 标签的href 属性？例如，如果我有：

<a class="img-parent" href="http://placehold.it/400x200">
    <img class="img-class" src="http://placehold.it/90x90" alt="This will change" />
</a>

我可以仅使用 CSS 更改img 的内容吗？

我知道我可以使用以下代码更改img，但我可以将其指向父级的href 属性吗？

.img-class{
   content:url("http://placehold.it/400x200");
}

Answer 1

理论上，我认为你可以使用CSS variables：

.img-parent {
  --img: attr(href);
}
.img-class {
  content: url(var(--img));
}

但不要指望它会起作用（还）：

• content 应用于所有元素（不仅是 ::before 和 ::after）并未得到广泛实施。
• attr() 在content 以外的属性中没有得到广泛实现。
• CSS 变量未得到广泛实施。
• url() 中的 CSS 变量实现得更少。