css - 有没有一种巧妙的方法可以在表示层中获取背景图像的属性？

Question

我有一个 CC-BY 图像，我将其用作背景，由 CSS 引入。此图像纯粹是为了它的外观，绝对不是内容。我需要在某处为这张图片添加署名，显然最好将此署名链接到提供图片的好心人。但是，我真的不想将链接文本放入我的 HTML 中，因为这会破坏实际内容和演示文稿的分离(属性链接实际上是演示文稿的一部分，我会说，因为如果您在没有背景图像的情况下查看页面，你不会真的想看到它)。

有什么方法可以让我在这里将演示文稿和内容分开？

我目前的代码看起来像

<div class='backgrounded'>
  <div class='content'><h1>Some stuff here</h1></div>
  <div class='attribution'>
    Image from <a href='http://example.com/image'>Lovely CC-BY person</a>
  </div>
</div>

还有 CSS:

div.backgrounded {
    background: url(/images/an_image.jpg);
}
div.attribution {
    color: #ffffff; 
    float: right;
}

这在内容中有归属，我宁愿没有。

我考虑过的其他事情包括:

• 将属性放在图像本身中。这解决了代码分离问题，但我的图像是一个很好的宽图像，位于左侧，因此有足够的背景用于宽浏览器窗口。图像的右下角几乎总是在视线之外。我看不出如何将此属性设为链接。

• 制作包含属性文本的图像并将其放在当前属性所在的位置，同样在背景中，但在顶部我想我可以使用 JavaScript 将其设为链接。这似乎有很多问题。

有没有办法解决我的图片只在 CSS 中被引用的问题？或者做不到这一点，什么是最好的方法来很好地分离事物，例如，可以在不编辑 HTML 的情况下替换图像？

Answer 1

您可以在 CSS 中留下评论:

div.backgrounded {
    background: url(/images/an_image.jpg); /*Image provided by [name]*/
}

然后属性在 CSS 中，但在实际页面上不可见。