Como usar as propriedades do fornecedor em vários planos de fundo?

Question

Quero usar vários planos de fundo em css, que atualmente são suportados pelo Firefox 3.61, Chrome/Safari, supostamente Opera10.5 (não roda em gnu/linux).Está funcionando bem, mas gostaria de usar gradientes lineares como plano de fundo.funciona bem no Firefox, não funciona com o Chrome, mas não consigo descobrir como fazê-lo funcionar para ambos ao mesmo tempo.alguma pista?http://snook.ca/archives/html_and_css/multiple-bg-css-gradients foi o que mais se aproximou do que eu precisava, mas ainda não consegui fazê-lo funcionar com o Chrome.

Answer 1

Isso funcionou para mim. Parece que colocar o Mozilla depois que o WebKit faz com que o Webkit reconheça a existência de um segundo parâmetro para a imagem de fundo e sem a sua declaração mais antiga. Então, estou colocando a declaração -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*/

Answer 2

Não tenho certeza, mas acho que o Chrome ainda não suporta isso.Embora várias imagens de fundo e gradientes CSS em um elemento pareçam legais, eu ainda recomendaria usar vários elementos com uma imagem de fundo cada.Por alguma razão, ainda existem pessoas por aí que usam o IE, que não é nada compatível com CSS3.