带有颜色的css渐变背景

Question

我看到了这个css按钮演示，它使用png进行渐变覆盖https://zurb.com/blog/super-awesome-buttons-with-css3-and-rgba。

png渐变的好处是您可以轻松地分别更改按钮或渐变的颜色。

似乎有一种方法可以用CSS来实现这一点。有一个白色的渐变背景和一个单独的纯色背景在它后面？

Answer 1

根据您所支持的浏览器(请参阅Mozilla文档中的支持)，您可以使用linear-gradient作为后台的一部分来完成这一任务。

​

.awesome_button {
  width: 100px;
  height: 30px;
  
  background: #444499 linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 100%);

  border-radius: 5px;
  color: #ffffff;
}

<button class="awesome_button">
  Test Button
</button>

​