Bạn có thể tạo các độ dốc mờ dần sang độ mờ đục bằng cách sử dụng CSS hoặc JavaScript không?

Question

WebKit đã giới thiệu khả năng tạo gradient cho CSS. Ví dụ: với mã sau:

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

Tuy nhiên, bạn có thể có độ mờ đục bằng cách sử dụng CSS không? Tôi muốn gradient là một màu duy nhất trên một mặt, và mờ dần về độ mờ trên không.

Tính tương thích của trình duyệt chéo không quan trọng; Tôi chỉ cần nó để làm việc trong Google Chrome.

Có cách nào để thực hiện việc này bằng CSS không? Nếu không, có thể một cái gì đó tương tự được thực hiện bằng cách sử dụng JavaScript (không phải jQuery)?

Cảm ơn sự giúp đỡ của bạn.

Answer 1

Có

cho màu sắc, sử dụng rgba (x, y, z, o) trong đó o là độ mờ

nên hoạt động

ví dụ

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

Edit: Đối với giá trị cuối cùng (opacity) 1 là đục & 0 là trong suốt

Answer 2

chưa được thử nghiệm, nhưng điều này nên làm việc (trong FF làm việc này (với một cú pháp khác nhau) - Tôi không chắc chắn nếu săn/webkit biết rgba):

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

Answer 3

Yup, rgba(red, green, blue, alpha) là những gì bạn nên sử dụng http://www.w3.org/TR/css3-color/#rgba-color, ví dụ (Hãy thử nó ra trên):

/* 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 */ 
);