css 渐变背景及其背后的颜色

标签 css button gradient

<分区>

我看到这个 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>

关于css 渐变背景及其背后的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48133790/

上一篇:jquery - 调整大小时,文章不会停留在其他 sibling 之上

下一篇:jquery - Springboot Bootstrap - 轮播不工作

相关文章:

Java按钮问题

css - 单击事件更改 GridView 自定义按钮文本和 Css

iphone:将 CALayer 作为子层添加到 UIButton 的层会导致 EXC_BAD_ACCESS

javascript - fancybox jquery,弹出窗口后不应用css

带有视口(viewport)的 Wordpress 页眉和页脚比例

java - 如何检索按钮位置?

C# - 如何按照彩虹的顺序排列颜色列表?

flutter - 如何制作带有渐变背景的 Flutter 应用栏

c# - Selectpdf - 无法删除页面上边距

javascript - 如何在另一个 div 之上显示和隐藏一个 div onMouseOver