Czy można tworzyć gradienty, które zanikają do przezroczystości za pomocą CSS lub JavaScript?

Question

WebKit wprowadził możliwość tworzenia gradientów CSS. Na przykład z następującym kodem:

-webkit-gradient(linear, left top, left bottom, from(#fff), to(#000)); 

Czy jednak można użyć gradientu przezroczystości za pomocą CSS? Chcę, aby gradient był pojedynczym kolorem z jednej strony, a zanikał do zera nieprzezroczystości z drugiej.

Kompatybilność z różnymi przeglądarkami nie jest ważna; Potrzebuję go do pracy w przeglądarce Google Chrome.

Czy jest jakiś sposób, aby to zrobić za pomocą CSS? Jeśli nie, czy można zrobić coś podobnego za pomocą JavaScript (nie jQuery)?

Dzięki za pomoc.

Answer 1

Tak

dla kolory, wykorzystanie rgba (x, y, z, O), w którym o jest krycie

powinien działać

np

background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); 

Edit: Dla wartości końcowej (krycie) 1 jest nieprzezroczysta & 0 jest przezroczysta

Answer 2

nie testowane, ale to powinno działać (w FF działa (z innej składni) - nie jestem pewien, czy Safari/WebKit wie rgba):

-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(0,0,0,0))); 

Answer 3

Tak, rgba(red, green, blue, alpha), co należy użyć http://www.w3.org/TR/css3-color/#rgba-color, przykład (Wypróbuj go na):

/* Webkit */ 
background: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(1, rgba(0,0,0,0.0)), /* Top */ 
    color-stop(0, rgba(0,0,0,1.0)) /* Bottom */ 
); 

/* Gecko */ 
background: -moz-linear-gradient(
    center bottom, 
    rgba(0,0,0,1.0) 0%, /* Bottom */ 
    rgba(0,0,0,0.0) 100% /* Top */ 
);