Foros del Web » Creando para Internet » CSS »

duda con la tecnica para reemplazar texto por imagen.

Estas en el tema de duda con la tecnica para reemplazar texto por imagen. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/12/2009, 12:14
Avatar de Copia  
Fecha de Ingreso: noviembre-2009
Mensajes: 309
Antigüedad: 8 años
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.
  #2 (permalink)  
Antiguo 15/12/2009, 13:27
Avatar de Copia  
Fecha de Ingreso: noviembre-2009
Mensajes: 309
Antigüedad: 8 años
Puntos: 4
Respuesta: duda con la tecnica para reemplazar texto por imagen.

bueno despues de pobrar y erra vi que que el codigo quedaria asi:

Código:
h1{
		position:relative;
		width:570px;
		height:43px;
		text-indent:-9999px;
		overflow:hidden;		
		}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:26.