Question

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

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

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

Answer 1

根据您支持的浏览器（请参阅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>

css渐变背景与它背后的颜色

1 个答案: