如何在CSS中为元素添加透明度渐变效果？

Question

是否有可能的方法或解决方案，可以使元素从上到下从100％淡化至0％不透明度？类似于线性渐变背景，但是应用于元素本身的透明度（而不是背景颜色）。

这个想法是，在悬停状态下，它会变得更亮，并且在点击时，移动到活动弹出窗口的位置。

- Gisheri

---

网络上有很多“CSS渐变生成器”。您可以找到一个来获取正确的颜色/透明度。之后，考虑使用工具包（例如jQuery）来管理过渡过程。HTML5对渐变和过渡有良好的支持。 - Chris Walsh

谢谢Chris。我相信你指的是背景颜色线性渐变？我看到的所有渐变生成器都会为背景颜色生成CSS代码。然而，我还没有找到一种使用CSS在元素上创建透明度渐变的方法（将不透明度应用于元素内部的子元素等）。我不认为有内置的CSS属性可以做到这一点，但我在这里看到了一些很酷的技巧，用于其他CSS概念，所以我想问问社区。 - Gisheri

是的，你说得对。(半)透明的CSS背景颜色不会影响内容或子元素。opacity CSS属性会产生影响，但我认为你不能用它来做渐变效果。 - Chris Walsh

Answer 1

好的，我看到了两种不同类型的透明度，第一种是像这样的 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 */
}

希望这个代码片段能帮到您，敬礼。

- Emmanuel López

Answer 2

有很多在线CSS生成器，为什么不使用它们呢。

这里有一个帮助链接，你可以去那里生成你想要的渐变效果。

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

- M.Tanzil