Ver Mensaje Individual
  #7 (permalink)  
Antiguo 21/08/2009, 01:41
Avatar de Maicro
Maicro
 
Fecha de Ingreso: agosto-2009
Ubicación: En el imperio de Gallardón I
Mensajes: 203
Antigüedad: 14 años, 8 meses
Puntos: 2
Respuesta: ¿Por qué una imagen se ve distinto como fondo que como imagen?

Cita:
Iniciado por kseso? Ver Mensaje
Hola Maicro:
Muy buenas, y muchas gracias por tu interés.

Cita:
Iniciado por kseso? Ver Mensaje
si una imagen de 1px de anchura la repites como fondo, lo que hace el navegador es eso, repetirla en nº de veces que necesite para cubrirlo.
Sí, es así como tengo el fondo del [body] de la página con la que estoy. El fallo, que he pensado antes de dormirme , es que, como dices, lo que me enseñaron era una imagen de un pixel de ancho repetida, y no estirada. El señor alemán, que ya viene a verme.

Cita:
Iniciado por kseso? Ver Mensaje
Pero si modificas el tamaño con las propiedades width o height, el navegador la estira (o la encoge), con la consiguiente deformación o pérdida de calidad.
Sí, pero, lo que no me cuadra es lo que os mostré:



La primera imagen, situada a continuación del texto "Como imagen gif", de un pixel de ancho, está estirada con este código:

Código HTML:
<img src="img/botonoff.gif" width ="100px" height ="30px" /> 
La segunda imagen, situada bajo el texto "Fondo de capa gif", la misma de un pixel de ancho, también está estirada está estirada con este código:

Código HTML:
#gif{
	background-image: url(img/botonoff.gif);
	width:200px;
	height:30px;
	color: #ffffff;		
}
Las dos, entiendo, las tiene que estirar el navegador -en horizontal porque en vertical ocupan ambas 30 pixeles- para mostrarlas en pantalla. Y ambos, IE y Chrome, al estirarla como fondo la interpolan y, al estirarla como imagen, simplemente duplican la columna de pixeles...

Cita:
Iniciado por kseso? Ver Mensaje
Y los png's y jpg's en los fondos, los puedes usar sin problemas. Quizás te confundas con el hecho de que ie6 no representa bien las transparencias de los png's.
No lo sé. Mira el código:

Código HTML:
#jpg{
	background-image: url(img/botonoff.jpg);
	width:200px;
	height:30px;
	color: #ffffff;		
}
#png{
	background-image: url(img/botonoff.png);
	width:200px;
	height:30px;
	color: #ffffff;		
}
Si no estoy equivocado, el primero pone como de fondo un jpg, y el segundo un png que no posee transparencia...

Bueno, de todas formas, muchas gracias. Eso sí, no pongo birritas a estas horas, que se nos altera el personal...