2012-07-27 21 views
14

Mam problem z wyświetlaniem gradientu liniowego w Safari i Chrome. W przeglądarce Firefox pokazuje się dobrze.Liniowy gradient w przeglądarkach Chrome i Safari

Staram:

background: -webkit-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; 
background: -moz-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; 
background:  -ms-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; 
background:  -o-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; 

dziękuje za pomoc.

Odpowiedz

30

Spróbuj tego - http://jsfiddle.net/fwkgM/1/

background-color: #9e9e9e; 
    background-image: linear-gradient(to bottom, #9e9e9e, #454545); 

CSS3 Please

+1

Zweryfikowane że to działa w Chrome. :) –

+1

Usunąłem '-image' i nadal działa, więc dlaczego to dodałeś? –

+1

Myślę, że to zrobił, ponieważ oddziela obraz tła od koloru tła. Jeśli "obraz w tle" odnosi się do adresu URL, który nie jest dostępny, tło nadal będzie domyślnie powracało do "koloru tła". W tym przypadku okazało się, że zmiana "obrazu tła" na "tło" nadal działa, co jest tylko dowodem na to, że istnieje więcej niż jeden sposób na skórze kota. – JMD

6

Możesz też spróbować:

http://www.colorzilla.com/gradient-editor/

To całkiem dobry generator CSS3 Gradient. Sprawdziło się to dobrze dla mnie. Mam nadzieję, że to ci pomoże! : D

+0

Edytor gradientów jest świetny. Czy mogę pominąć sposób określania kolorów przy użyciu standardowych nazw kolorów CSS? Na przykład. lightslategray, et al. Mogę łatwo wyszukiwać i zastępować wynikowy gradient CSS, aby zmienić rgba (xyza) na żądane nazwy, ale wygenerowane dane SVG IE9 są generowane wcześniej. – JMD

1
background: -webkit-linear-gradient(left,transparent,black 50%,transparent); /* worked for me*/ 
1

Dla Nożna Cross spróbować następujących

background-color: #9e9e9e; /* fallback color if gradients are not supported */ 
background-image: -webkit-linear-gradient(bottom, rgb(213,12,18), #9e9e9e 40%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ 
background-image: -moz-linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* For Firefox (3.6 to 15) */ 
background-image:  -o-linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* For old Opera (11.1 to 12.0) */ 
background-image:   linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* Standard syntax; must be last */ 
Powiązane problemy