如何在CSS中的元素上做一個透明漸變？

Question

有什么可能的方法或解決方法，可以使元素的不透明度從上到下從100％漸變為0％？ 類似於線性漸變背景，但元素本身具有透明度（不是背景色）。

這個想法是，在懸停狀態下，它會變亮，並在單擊時移至活動彈出窗口的位置。

Answer 1

有很多在線CSS生成器，為什么不使用它。

這是為您提供的幫助鏈接，請轉到此處並生成所需的漸變。

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

Answer 2

好的，我看到了兩種不同類型的透明度，第一種是這樣的alpha css：

    div {
         opacity: 0.5;
         filter: alpha(opacity=50);
    }

這種樣式使整個div（“自定義共享對話框”）和其他CSS（在頁面按鈕上創建線性漸變樣式）透明：

#bottom_fade { z-index: 99; 
           position: fixed;     
           bottom: 0%;
           background-image: url("bottom-fade.png"); 
           /*in your case use a grey image with transparency*/
     }

或者，您可以使用覆蓋頁面所有按鈕的div並添加線性漸變：

#grad {
     background: red; /* For browsers that do not support gradients */
     background: -webkit-linear-gradient(red, yellow); 
     /* For Safari 5.1 to 6.0 */
     background: -o-linear-gradient(red, yellow); 
     /* For Opera 11.1 to 12.0 */
     background: -moz-linear-gradient(red, yellow); 
     /* For Firefox 3.6 to 15 */
     background: linear-gradient(red, yellow); /* Standard syntax */
}

希望這段摘要對您有所幫助。