如何将多个线性渐变添加到一个css背景?如果
我正在尝试完成下面左边的小工具框,正如你所看到的,有一个对角的线性渐变,以及从上到下的光泽。我在css中创建的那个在右边,而我正在尝试实现的那个在左边。有没有一种方法可以只使用一个背景属性来完成这项任务?或者,我是否需要用另一个div包围整个div,以便在其上覆盖半透明渐变?谢谢
更新代码:
.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);
解决方案
一般可以添加多个背景,用逗号分隔。列出的第一个将显示在顶部。
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
相关文章