不使用圖像連續改變背景顏色的不透明度

Question

我已經構建了一個div元素，並給出了背景顏色綠色。然後，我想更改顏色的不透明度，直到它是白色的，從上到下。最黑暗的綠色將成爲最底層。有沒有辦法做到這一點與CSS，而不創建一個圖像呢？ 謝謝

Answer 1

你可以使用CSS3生成背景漸變（通過背景圖像元素），但它並不統一支持跨瀏覽器。

你會看這樣的代碼：

background-color: #108B00; /* Fallback solid color */ 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */ 
    background-image: -webkit-linear-gradient(top, #108B00, #FFFFFF); /* Chrome 10+, Saf5.1+, iOS 5+ */ 
    background-image: -moz-linear-gradient(top, #108B00, #FFFFFF); /* FF3.6 */ 
    background-image:  -ms-linear-gradient(top, #108B00, #FFFFFF); /* IE10 */ 
    background-image:  -o-linear-gradient(top, #108B00, #FFFFFF); /* Opera 11.10+ */ 
    background-image:   linear-gradient(top, #108B00, #FFFFFF); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#108B00', EndColorStr='#FFFFFF'); /* IE6–IE9 */