2010-04-05 33 views
1

Je veux utiliser plusieurs arrière-plans dans css, qui sont actuellement supportés par Firefox 3.61, Chrome/Safari, supposément Opera10.5 (ne fonctionne pas sous GNU/Linux). Cela fonctionne bien, mais je voudrais utiliser des gradients linéaires comme arrière-plan. cela fonctionne bien pour Firefox, ne fonctionne pas du tout avec Chrome, mais je ne peux pas comprendre comment le faire fonctionner pour les deux en même temps. des indices? http://snook.ca/archives/html_and_css/multiple-bg-css-gradients est venu le plus proche de correspondre à ce dont j'ai besoin, mais je ne pouvais pas le faire fonctionner avec du chrome pour le moment.Comment utiliser les propriétés du fournisseur dans plusieurs arrière-plans?

Répondre

0

cela a fonctionné pour moi. il semble que placer mozilla après webkit fait que webkit reconnaisse l'existence d'un second paramètre pour background-image et supprime sa déclaration plus ancienne. donc je place la déclaration -moz avant -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*/ 
0

Je ne suis pas positif, mais je suppose que le chrome ne supporte tout simplement pas encore. Bien que plusieurs images d'arrière-plan et des dégradés de css sur un élément paraissent bien, je recommanderais quand même d'utiliser plusieurs éléments avec une image de fond chacun. Pour une raison quelconque, il y a toujours des gens qui utilisent IE qui n'est pas du tout sympathique pour CSS3.