是否有一种巧妙的方法来获取表示层中背景图像的属性？

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中，但在实际页面上是不可见的。