Estoy diseñando una página con una imagen de fondo y un color de fondo para el área más allá del final de la imagen de fondo (degradado).
Algo como:
background: url("/images/bg.png") repeat-x scroll center top #666666;
Puedo hacer que el color de fondo coincida con el final de la imagen en Firefox o Chrome, pero no en ambos. En uno de los dos, el color que establezco siempre es más oscuro que el final del degradado, por lo que se ve claramente una línea divisoria entre los dos.
No sé cómo seleccionar un color que funcione en ambos navegadores.
Aquí hay un ejemplo de un sitio que usa esta técnica con éxito:
En este caso, el color de fondo coincide con el final de la imagen de fondo tanto en FF como en Chrome (cerca del final de la página, la imagen de fondo termina y el color de fondo llena la parte inferior).
¿Alguna idea de cómo hacer que esto funcione? Gracias.
Editar: Esto me recuerda a los viejos problemas relacionados con la paleta, pero pensé que ya habíamos superado todo eso.
Aquí hay una solución muy simple.
Cuando cree su documento, haga que su degradado se desvanezca a transparente. Es decir, no predefine ningún color de fondo, solo tiene el degradado. Ahora, en tu css
background: url("/images/bg.png") repeat-x scroll center top #666666;
El, #666666es donde defines EN QUÉ se desvanece tu gradiente. De esta manera, siempre será consistente. Además, esto significa que puede cambiar fácilmente los colores un poco con solo una línea de código.
ALTERNATIVA
¡O una solución aún MÁS fluida es usar un CSS completamente nuevo! Desafortunadamente, aún no es "estándar" y puede pasar un tiempo hasta que lo sea, pero a continuación he enumerado cómo hacer degradados de fondo usando SOLO CSS.
body {
background: -moz-linear-gradient(top, #ff00aa, #123000); //Firefox
background: -webkit-gradient(linear, left top, left bottom, from(#ff00aa), to(#123000)); //Chrome
}
Aquí hay una gran herramienta para ayudarlo a hacer gradientes CSS .
Puede usar un PNG transparente que se desvanezca de su color a transparente. Esta solución tiene la ventaja de permitirle cambiar el color de fondo (con css) sin cambiar la imagen degradada.
No es una respuesta, sino razones por las cuales:
La mejor solución es lo que sugiere Sam ... ya que de todos modos está utilizando PNG, también podría aprovechar la función de transparencia de ellos.
Otra opción es utilizar una utilidad de compresor PNG como OptiPNG Lista de opciones . Una de las razones por las que pueden existir esas diferencias de color es porque algunos programas de diseño guardan información gamma en el archivo. No todos los navegadores utilizan esa información, pero ofrece compensaciones y resultados descoloridos. Esta opción funciona mejor si tiene fondos texturizados. En aras de mantener bajos los archivos de archivo, usaría una combinación de un compresor PNG y CSS.
Gif podría ser una opción, pero generalmente da un tamaño de archivo más grande que un PNG de 8 bits
..Si usa gradientes de color sólido como fondo, yo elegiría la ruta PNG/color de fondo transparente como se describe en DA01 y Sam
Si no te importa usar degradados CSS, prueba esto: http://www.colorzilla.com/gradient-editor/
el creador de degradados es muy intuitivo (exactamente como el de adobe photoshop) y genera el código para todos los navegadores tropecientos.
También hay algunos ajustes preestablecidos que también son muy buenos.
Yo optaría por los gradientes css porque la mayoría de los navegadores los admiten y para aquellos navegadores que no lo hacen (cue nuestro pequeño demonio favorito, IE) también hay una opción alternativa.
Si sus gráficos no implican transparencia, puede intentar usar jpg en lugar de png.
bgman5
bgman5
Felipe Regan
dkuntz2