У меня есть изображение 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?