Question

我正在尝试创建一个类来应用于使用CSS为它们提供渐变的元素。问题是我想要一个包含NO COLOR-only opacity从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 */

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

Answer 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：你也可以使用#AARRGGBB format在旧的IE版本中转换半透明颜色。

CSS创建不透明度渐变

1 个答案: