多色背景 HTML答案

【问题标题】：Multiple color background HTML多色背景 HTML
【发布时间】：2016-09-01 10:46:22
【问题描述】：

我正在尝试创建一个多色背景来实现这一点：

现在我设法做到了：

我做了什么：

所需背景：

我正在尝试使用渐变来做到这一点，但似乎不可能将两个渐变结合起来来做到这一点。（可以做其他事情，但不是这个）。

有没有办法实现这个背景？

谢谢！

【问题讨论】：

请也添加您的代码？
你是指那个地方和时间所在的灰色背景加上箭头吗？
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的方法以及为什么它不起作用。
感谢 Pauli 的评论。真的对我有帮助！！我从来没想过要搜索谷歌，我真是个愚蠢的开发者。
我最终使用渐变来表示绿色，并将其用于灰色：.assignment-item:before{ position:absolute; z-索引：-1；底部：0；左：2%；宽度：100%；高度：25%；内容：””;背景颜色：#f2f2f2； }

标签： html css gradient

【解决方案1】：

试试这个（根据需要调整百分比和颜色）：

.yourdiv{
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 70%, #f1f1f1 70%, #f1f1f1 100%);
background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 );

}

DEMO HERE

【讨论】：

【解决方案2】：

我猜你需要显示所需输出中的深灰色部分吗？如果是这样，我建议将其分成几个部分并给出个人背景。如果你可以发布一些代码。我很乐意提供帮助。

【讨论】：

【解决方案3】：

好的，不确定这是否正是您想要的，但这就是我对 css/html 进行 psd 的方式。请参阅下面的屏幕截图。

还有一个WORKING DEMO HERE

只需将整张卡片包装在一个 div 中并应用左边框即可。

  border-left-width: 8px;
  border-left-color: rgba(10, 255, 80, 0.75);
  border-radius: 5px;

如果你不想要，你可以移除盒子阴影，只是感觉移动它很活跃。

【讨论】：

感谢 Godinall 的帮助，但正如我昨天评论的那样，我设法找到了一种方法来做我需要的首先使用“.assignment-item:before{”然后渐变。你可以在评论中看到输出。
@CarlosRoig 是的，你可以那样做，但我的方法可以让你在每张卡片中拥有不同高度的内容，而且看起来仍然不错，你可以到处玩

【解决方案4】：

最后，我设法做到了：

这是绿色部分：

.assignment-item {
  padding: 5px 5px 0px 10px !important;
  margin:15px auto;
  border-radius: 8px;
  background: linear-gradient(to right,  #4f8b2b 0%,#4f8b2b 2%,#ffffff 2%,#ffffff 100%, transparent) !important;
}

灰色部分：

.assignment-item:before{
  position:absolute;
  z-index:-1;
  bottom:0;
  left:2%;
  width:100%;
  height:25%;
  content:"";
  background-color:#f2f2f2;
}

结果如下：

【讨论】：