CSS 创建不透明度渐变答案

【问题标题】：CSS Creating Opacity GradientCSS 创建不透明度渐变
【发布时间】：2014-05-06 02:09:08
【问题描述】：

我正在尝试创建一个类以应用于元素，这将使用 CSS 为它们提供渐变。问题是我想要一个不包含任何颜色的类——只有从 1.0 到 0 的不透明度。这样，我可以将它“放置”在任何颜色的任何元素之上，它会给它一个渐变，基本上从原始颜色并逐渐变为白色。

    background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e9e9e9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e9e9e9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#e9e9e9 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#e9e9e9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9e9',GradientType=0 ); /* IE6-9 */

如何在不指定任何颜色的情况下执行此操作？

【问题讨论】：

喜欢这个jsfiddle.net/j08691/kst95?
@j08691 出于好奇，如果选择的颜色是transparent，您是否需要0%？
@davidpauljunior - 0% 是位置，所以我相信。
@j08691 啊哈，谢谢清理。

标签： html css

【解决方案1】：

如果不指定要过渡到的颜色，这是不可能的。您可以做的是使用rgba() 定义颜色，然后定义其不透明度，但仅影响不透明度本身是不可能的。使用rgba() 时获得的渐变示例如下：

background: linear-gradient(to bottom,  rgba(255, 255, 255, 1) 0%, rgba(233, 233, 233, 0) 100%); /* W3C */

这将在两种指定颜色之间转换，从在#e9e9e9（与rgba(233, 233, 233, 1) 相同）处完全透明到在白色处完全不透明。同样，这是您实际想要的替代方案，但仅转换不透明度是不可能的。

PS：您还可以在旧版 IE 中使用#AARRGGBB format 转换半透明颜色。

【讨论】：