Pregunta

Quiero usar varios fondos de CSS, que actualmente son soportados por Firefox 3.61, Chrome / Safari, supuestamente Opera10.5 (no se ejecuta en GNU / Linux). Se está trabajando muy bien, sin embargo, me gustaría utilizar gradientes lineales como fondo. funciona bien para Firefox, no funciona en absoluto con Chrome, pero no puedo encontrar la manera de hacer que funcione para ambos al mismo tiempo . ¿alguna pista? http://snook.ca/archives/html_and_css/multiple-bg-css- gradientes vinieron el más cercano para que coincida con lo que necesito, pero no pude conseguir que funcione con Chrome todavía.

¿Fue útil?

Solución 2

Esto funcionó para mí. parece que la colocación de Mozilla después de WebKit WebKit hace reconocer la existencia de un segundo parámetro Imagen de fondo y desarmar su declaración más antiguo para. así que estoy colocando la declaración -moz antes webkit.

  background-image: url("../images/block_stripe_bg.png"); /* for older browsers */
  background-image: url("../images/block_stripe_bg.png"), -moz-linear-gradient(center top, white, #dddddd); /* works for mozilla, ignored by other browsers */
  background-image: url("../images/block_stripe_bg.png"), -webkit-gradient(linear, center top, center bottom, from(white), to(#dddddd)); /* works for webkit, ignored by other browsers */
  background-repeat: repeat; /* older browsers */
  background-repeat: repeat, no-repeat; /* newer browsers should apply this to both backgrounds*/

Otros consejos

No estoy seguro, pero mi conjetura es que el cromo simplemente no es compatible con eso todavía. A pesar de que las imágenes de fondo y los gradientes CSS múltiples en un elemento seguro que suena bien, aun así, recomendaría el uso de varios elementos de una imagen de fondo con cada uno. Por alguna razón, todavía hay gente por ahí que utilizan IE que no se CSS3 agradable en general.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top