Question

我已经构建了一个div元素并将背景颜色设置为绿色。然后，我想要将颜色的不透明度从上到下更改为白色。最黑的绿色将是顶部和最浅的颜色，白色将是它的底部。有没有办法用css做到这一点，而不为它创建一个图像？感谢

Answer 1

您可以使用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 */

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

1 个答案: