css 渐变背景,后面有颜色

css gradient background with color behind it

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

png渐变的好处是可以方便的单独改变按钮的颜色或者渐变。

似乎有办法用 CSS 做到这一点。有白色渐变背景和背后单独的纯色背景吗?

根据您支持的浏览器(请参阅 Mozilla Documentation 中的支持),您可以使用 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>