{"id":5270,"date":"2015-07-13T18:52:35","date_gmt":"2015-07-13T21:52:35","guid":{"rendered":"http:\/\/betaweblog.education\/wp\/?p=5270"},"modified":"2025-03-14T21:27:50","modified_gmt":"2025-03-15T00:27:50","slug":"agregar-un-pie-a-las-fotos-de-una-pagina","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2015\/07\/13\/agregar-un-pie-a-las-fotos-de-una-pagina\/","title":{"rendered":"Agregar un pie a las fotos de una p\u00e1gina"},"content":{"rendered":"
\n

\"Caf\u00e9<\/p>\n

\n

Esta imagen muestra un rico caf\u00e9 con leche decorado, y su correspondiente vasito de jugo de naranja.<\/p>\n<\/div>\n<\/div>\n

Para que una foto tenga un texto debajo, como en el ejemplo de la derecha, podemos utilizar un DIV dentro de otro:<\/p>\n

<div style=”width: 50%; border: 1px solid; background-color: #eee; padding: 0.5em; float: right; margin-left: 0.5em;”><\/em><\/p>\n

<a href=”fotogrande.png”><\/em><\/p>\n

<img src=”fotochica.png” alt=”Un caf\u00e9 con leche realizado con arte” width=”100%” \/><\/em><\/p>\n

<\/a><\/em><\/p>\n

<div style=”width: 90%; padding: 0.5em; font-size: 0.8em; margin: auto;”>Esta imagen muestra un rico caf\u00e9 con leche decorado, y su correspondiente vasito de jugo de naranja. <\/div> <\/em><\/p>\n

<\/div><\/em><\/p>\n

De esa manera tendremos un DIV dentro de otro. El DIV m\u00e1s grande tiene un color de fondo gris muy clarito y el de adentro contiene la imagen.<\/p>\n

Separando dise\u00f1o de contenido<\/h2>\n

En los casos en que tenemos la posibilidad de acceder a la hoja de estilo de la p\u00e1gina, ser\u00e1 mucho mejor separar el dise\u00f1o (que va en la hoja de estilo, CSS) del contenido (que va en el archivo HTML). Tom\u00e9 la base de este blog (CiudadBlogger<\/a>)<\/p>\n

\n
\"Caf\u00e9<\/div>\n<\/div>\n

Este es el c\u00f3digo para la hoja de estilo:<\/p>\n

.piedefoto\u00a0{ padding: 0; width: 40%; position: relative; } <\/em><\/p>\n

.piedefoto\u00a0img { width: 40%; display: block; padding: 0; border: 0; } <\/em><\/p>\n

.piedefoto::before { content: attr(title); position: absolute; background: #EAF200; \/* Color de fondo *\/<\/em><\/p>\n

background: rgba(234, 242, 0, 0.6); \/* Color de fondo en RGBA *\/ <\/em><\/p>\n

color: #000; \/* Color del texto *\/ <\/em><\/p>\n

font-size: 14px; \/* Tama\u00f1o del texto *\/ <\/em><\/p>\n

padding: 5px; right: 0; bottom: 0; left: 0; text-align: center; z-index: 1; }<\/em><\/p>\n

Y este, el c\u00f3digo para insertar en el documento HTML:<\/p>\n

<div style=”width:40%;<\/b> padding:1em; margin:0 auto; float:right;”><div class=’piedefoto’ title=’Escrib\u00ed ac\u00e1 el pie de foto’><img src=’Direcci\u00f3n de la imagen’\/><\/div><\/div><\/em><\/p>\n

En el post original<\/a> explican por qu\u00e9 el color de fondo est\u00e1 dos veces:<\/p>\n

En el primer c\u00f3digo que a\u00f1adimos est\u00e1n los estilos para el pie de foto. Ver\u00e1s que el color de fondo est\u00e1 dos veces, primero en c\u00f3digo hexadecimal y luego en RGBA, esto es porque con RGBA podemos definir una transparencia, en este caso es de 0.6, pero en el caso de que el navegador (Internet Explorer como siempre) no soporte este estilo entonces tomar\u00e1 el primero, el hexadecimal, pero sin la transparencia. En la secci\u00f3nColores<\/a> puedes obtener el c\u00f3digo tanto en hexadecimal como en RGB.<\/p><\/blockquote>\n

Si jugamos un poco con colores y niveles de transparencia podemos lograr muchas variantes.<\/p>\n

\"opciones\"<\/a><\/p>\n

 <\/p>\n

Estos son los estilos de esos tres ejemplos:<\/p>\n

.prueba::before { content: attr(title); position: absolute; background: #00ff00; background: rgba(234, 234, 234, 0.7); color: #000; width:100%;padding: 5px; right: 0; bottom: 0; left: 0; text-align: center; z-index: 1; }<\/em>
\n.prueba { padding: 0; position: relative; }<\/em>
\n.prueba img { display: block; padding: 0; border: 0; }<\/em><\/p>\n

.prueba2::before { content: attr(title); position: absolute; background: #0000FF; background: rgba(0, 0, 255, 0.6); color: #fff; width:50%;padding: 5px; right: 0; bottom: 50%; left: 0; text-align: center; z-index: 1; }<\/em>
\n.prueba2 { padding: 0; position: relative; }<\/em>
\n.prueba2 img { display: block; padding: 0; border: 0; }<\/em><\/p>\n

.prueba3::before { content: attr(title); position: absolute; background: #FF9A00; background: rgba(255, 154, 0, 0.8); color: #000; width:90%;padding: 5px; bottom: 90%; left: 60px; text-align: left; z-index: 1; }<\/em>
\n.prueba3 { padding: 0; position: relative; }<\/em>
\n.prueba3 img { display: block; padding: 0; border: 0; }<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Esta imagen muestra un rico caf\u00e9 con leche decorado, y su correspondiente vasito de jugo de naranja. Para que una foto tenga un texto debajo, como en el ejemplo de la derecha, podemos utilizar un DIV dentro de otro: <div style=”width: 50%; border: 1px solid; background-color: #eee; padding: 0.5em; float: right; margin-left: 0.5em;”> <a href=”fotogrande.png”> … Continuar leyendo “Agregar un pie a las fotos de una p\u00e1gina”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-5270","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=5270"}],"version-history":[{"count":1,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5270\/revisions"}],"predecessor-version":[{"id":6949,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5270\/revisions\/6949"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=5270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=5270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=5270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}