Tengo una imagen CC-BY que estoy usando como fondo, traída por CSS. Esta imagen está puramente por su aspecto, y definitivamente no por su contenido. Necesito poner la atribución en esta imagen en alguna parte, y obviamente sería mejor hacer de esta atribución un enlace a la persona amable que proporcionó la imagen. Sin embargo, realmente no quiero poner texto de enlace en mi HTML ya que rompe la separación del contenido real y la presentación (el enlace de atribución es realmente parte de la presentación, diría yo, ya que si miras la página sin la imagen de fondo) , realmente no querrías verlo).¿Hay alguna manera de obtener atribución para una imagen de fondo en la capa de presentación?
¿Hay alguna forma en que pueda obtener mi separación de presentación y contenido aquí?
Mi código actual para esto se ve algo así como
<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>
Y el CSS:
div.backgrounded {
background: url(/images/an_image.jpg);
}
div.attribution {
color: #ffffff;
float: right;
}
Esto tiene la atribución en el contenido, en donde preferiría no tengo.
Otras cosas que he considerar incluyen:
Poner la atribución en la propia imagen. Esto resuelve el problema de separación del código, pero mi imagen es una bonita y amplia situada a la izquierda, por lo que hay suficiente fondo para una amplia ventana del navegador. La parte inferior derecha de la imagen casi siempre está fuera de la vista. No veo cómo puedo hacer de este atributo un enlace.
Cómo hacer una imagen que contiene el texto de atribución y poner que en la atribución actual es, de nuevo en el fondo, pero en la parte superior supongo que podría hacerlo un enlace usando JavaScript. Esto parece un montón de jugueteos.
¿Hay alguna manera de salir de esto donde mi imagen solo se menciona en el CSS? O en su defecto, ¿cuál es la mejor manera de mantener las cosas bien separadas, de modo que, por ejemplo, la imagen podría reemplazarse sin editar el código HTML?
+1 Interesante, sin embargo, diría que la imagen es parte de su contenido. Incluso si se trata de una imagen de fondo, sigue siendo parte de tu contenido, por lo que no se mezclaría si agregaras el enlace de atribución en tu HTML. – JohnP
¡Hola JohnP! El problema es que la imagen no está realmente en mi contenido, solo la trae el CSS, por lo que actualmente la parte HTML tiene la atribución, pero no la imagen real, y el CSS conoce la imagen, pero no la atribución, y ninguno realmente quiere estar allí sin el otro! –