Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/12/2009, 12:14
Avatar de Copia
Copia
 
Fecha de Ingreso: noviembre-2009
Mensajes: 309
Antigüedad: 14 años, 4 meses
Puntos: 4
duda con la tecnica para reemplazar texto por imagen.

Hola amigos, estoy practicando css y la verdad me he quedado confundido, se que si queremos tener una web con cualquier estilo de letra tendria que reemplazarlo por una imagen. con lo siguiente si el texto esta en un h1.

Código:
h1{
		height:43px;
		background-image:url(images/title_snow.gif);
		background-repeat:no-repeat;
		text-indent:-9999px;
		overflow:hidden;	
      }
Ahora que pasa si el nevegador tiene desactivado la carga de imagenes entonces encontre esta solucion:

Código:
h1{
		position:relative;
		width:570px;
		height:43px;
		overflow:hidden;		
		}
	h1 span{
		position: absolute;
		left:0;
		top:0;
		width:100%;
		heigth:100%;
		background-image:url(images/title_snow.gif);
		background-repeat:no-repeat;
		}
donde el html es:
Código:
<h1>
	Este es un titulo hielo <span></span>
</h1>
Y funciona cuando no esta desctivado el cargar imagenes, el problema surgio cuando active la opcion de cargar imagenes y no me salio la imagen ni el texto normal.

La solucion que hsata ahora tengo es implementar ambos codigos.
Código:
h1{
		height:43px;
		background-image:url(images/title_snow.gif);
		background-repeat:no-repeat;
		text-indent:-9999px;
		overflow:hidden;	
      }

	h1{
		position:relative;
		width:570px;
		height:43px;
		overflow:hidden;		
		}
	h1 span{
		position: absolute;
		left:0;
		top:0;
		width:100%;
		heigth:100%;
		background-image:url(images/title_snow.gif);
		background-repeat:no-repeat;
		}
Mi duda si esa es la forma correcta de hacerlo... ya que puse text-indent:-9999px; en la segunda sentencia h1 y el problema persiste.