Saltar al contenido

Cómo poner texto sobre una imagen sin posicionamiento absoluto o configurar la imagen como fondo

Solución:

Solía ​​hacer acrobacias como esta todo el tiempo tan pronto como llegaban las mesas. Realmente feo, y puede avergonzar seriamente a cualquier validador que lo ejecute: celdas de tabla superpuestas. Sin embargo, funciona en la mayoría de los navegadores e incluso sin css.

Ejemplo:

<table>  
  <tr>
    <td></td>
    <td rowspan=2><img src="https://i.stack.imgur.com/XlOi4.png"></td>
  </tr>  
  <tr>
    <td colspan=2>This is the overlay text</td>
  </tr>  
</table>

Lo sé, merezco un voto negativo por esto.

Si usa posicionamiento absoluto, debe especificar tanto el left y top atributos. Además, debe configurar position:relative; en algún elemento padre para convertirlo en una capa, de modo que el posicionamiento absoluto use ese elemento como origen. Si no especifica el origen, puede ser la ventana o puede ser algún otro elemento, y no sabe dónde terminará su elemento absolutamente posicionado.

Existen otras alternativas para colocar elementos uno encima del otro, cada uno con sus propias limitaciones.

Puede utilizar el posicionamiento relativo para hacer que el texto se muestre en la parte superior de una imagen:

<img src="https://foroayuda.es/..." alt="" />
<div style="position:relative;top:-50px;">
   This text will display 50 pixels higher than it's original position,
   placing it on top of the image. However, the text will still take up
   room in it's original position, leaving an empty space below the image.
</div>

Puede usar un elemento flotante dentro de otro elemento para poner texto encima de una imagen:

<div>
   <div style="float:left;">
      This text will be on top of the image. The parent element
      gets no height, as it only contains floating elements.
      However, IE7 and earlier has a bug that gives the parent
      element a height anyway.
   </div>
</div>
<img src="https://foroayuda.es/..." alt="" />

La mejor forma de controlar el aspecto de las cosas sería hacer que el texto formara parte de la propia imagen. Por supuesto, si usa un formato de imagen con pérdida como jpeg con alta compresión, podría verse realmente mal, pero ¿tal vez un PNG funcione para usted? O, dependiendo de la cantidad de colores, un gif podría funcionar.

Esto también le brinda fuentes de apariencia consistente, filtrado, etc.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *