如何将多个线性渐变添加到 CSS 背景?如果
Posted
技术标签:
【中文标题】如何将多个线性渐变添加到 CSS 背景?如果【英文标题】:How do I add multiple linear-gradients to a css background? If 【发布时间】:2014-09-09 23:12:39 【问题描述】:我正在尝试完成下面的左侧小部件框,如您所见,有一个对角线线性渐变,以及从上到下的光泽。我在 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);
【问题讨论】:
【参考方案1】:通常您可以添加多个背景,以逗号分隔。列出的第一个将显示在顶部。
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
【讨论】:
感谢您添加代码!我在上面创建了一个基本概念演示。 在demo中,使用linear-gradient
的部分是什么?
我不知道demo是怎么回事,所以我现在做了一个新的。以上是关于如何将多个线性渐变添加到 CSS 背景?如果的主要内容,如果未能解决你的问题,请参考以下文章