Css 不使用图像连续更改背景色的不透明度

我构建了一个div元素，并将背景色设为绿色。然后，我想改变颜色的不透明度，直到它从上到下变为白色。最深的绿色为顶部，最浅的白色为底部。有没有办法不用为css创建图像就可以实现这一点？

---

谢谢

您可以使用CSS3（通过background image元素）生成背景渐变，但在不同的浏览器中并不统一支持

您将看到这样的代码：

  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 */

---

您可以使用CSS3（通过background image元素）生成背景渐变，但在不同的浏览器中并不统一支持

您将看到这样的代码：

  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 */