Foros del Web » Creando para Internet » CSS »

background-color + background:url()

Estas en el tema de background-color + background:url() en el foro de CSS en Foros del Web. Veamos, os pongo cuatro casos Código HTML: <style type= "text/css" > input.azul { background-color:blue; } </style> 1) Resultado, el input tiene como fondo el color ...
  #1 (permalink)  
Antiguo 07/08/2009, 12:47
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
background-color + background:url()

Veamos, os pongo cuatro casos

Código HTML:
<style type="text/css">
input.azul
	{
		background-color:blue;
	}
</style> 
1) Resultado, el input tiene como fondo el color azul y la imagen

Código HTML:
<input type="text" size="25" style="background: url(imagenes/imagen.png) no-repeat center right; background-color:blue;"> 
2) Resultado, el input tiene como fondo solamente la imagen

Código HTML:
<input type="text" size="25" style="background-color:blue; background: url(imagenes/imagen.png) no-repeat center right;"> 
3) Resultado, el input tiene como fondo solamente la imagen

Código HTML:
<input type="text" size="25" style="background: url(imagenes/imagen.png) no-repeat center right;" class="azul"> 
4) Resultado, el input tiene como fondo solamente la imagen

Código HTML:
<input type="text" size="25" class="azul" style="background: url(imagenes/imagen.png) no-repeat center right;"> 
¿Alguien me puede explicar el por qué de este funcionamiento? Bueno, que si el background-color va antes o después y en función de eso sale la imagen o no lo puedo llegar a entender, ya que por ejemplo, si pones background-color: blue y luego pones background-color:red se queda con el último (red).
Pero, ¿Por qué el class es indiferente antes o después?

Todo esto viene a que quiero que el input tenga color de fondo y también una imagen de fondo, así que si hay otra forma también la podéis comentar (otra forma sería que la imagen ocupase el tamaño del input y ya incluyese el color, pero no me parece solución)
__________________
http://www.controldegastos.com, acepto sugerencias para el sitio.
Repetir conmingo: "tengo que dedicar más tiempo a gozar de placer"
  #2 (permalink)  
Antiguo 07/08/2009, 13:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: background-color + background:url()

"background" es una propiedad resumen de 'background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'
Y si recuerdas que la última declaración es la que prevalece, en el momento que lo último que declaras es "background:...." los valores que no defines son "cero" o "nulos" y prevalecen sobre los anteriores.

Si quieres que respete la declaración inicial del color, al poner el estilo en línea utiliza la propiedad "background-image", o en el estilo del head la resumida: "background: #00f".
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 07/08/2009, 13:35
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: background-color + background:url()

Perfecto, problema resuelto, muchas gracias!
__________________
http://www.controldegastos.com, acepto sugerencias para el sitio.
Repetir conmingo: "tengo que dedicar más tiempo a gozar de placer"
  #4 (permalink)  
Antiguo 08/08/2009, 05:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: background-color + background:url()

Muy bien: habrá que tomar nota de esta explicación para referenciarla cada vez que haya dudas al respecto.
__________________
Visita mi nueva web idplus.org
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 20:25.