如何在CSS背景中添加多个线性渐变？

Question

如何在CSS背景中添加多个线性渐变？

14

我正在尝试实现下方的左侧小部件框，并且你可以看到，它有一个对角线线性渐变，以及自上而下的光泽。我在CSS中创建的一个是在右边，而我正在尝试实现的是在左边。我是否可以仅使用一个背景属性来实现这一点？或者我需要用另一个div包围整个div，以便我可以在其上叠加半透明的渐变？谢谢

enter image description here

附带代码更新:

.drk-grad {
  background: linear-gradient(to bottom, #d2d2d2 7%, #b1b1b1 100%);
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-clip: padding-box;
  -webkit-box-shadow: 0px 1px 3px 1px #969494;
  box-shadow: 0px 1px 3px 1px #969494;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

解决方案：

background: repeating-linear-gradient(rgba(255,255,255,.5) -1%, rgba(107, 107, 107, 0.1), repeating-linear-gradient(135deg, #b6b6b6, #B6B6B6 10px, #b2b2b2 10px, #b2b2b2 20px);

- courtyen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 2540625 · Accepted Answer

通常，您可以添加多个背景，用逗号隔开。列出的第一个将显示在顶部。

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

http://lea.verou.me/css3patterns/

以下是基本概述。根据您的具体需求调整相关参数以获得所需的效果：

div {

    background: 
        linear-gradient(to top, transparent, #b1b1b1 100%),
        gray repeating-linear-gradient(45deg, transparent, transparent 35px,
        rgba(255, 255, 255, 0.5) 35px, 
        rgba(255, 255, 255, 0.5) 70px);

    background-clip: padding-box;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0px 1px 3px 1px #969494;
    height: 250px;
    width: 250px;
}

演示：https://jsbin.com/fidaxigaxi/edit?html,css,output