Question

我正在阅读有关gradients的内容，并且想知道是否有可能对于给定的div ，将实色和渐变色混合为其{{1}的CSS }}

我在一个酒吧的背景下考虑这个问题，它代表了白天和黑夜的交替：当天background（white宽度的50％），然后来自{的渐变{1}}到div（=黄昏，white宽度的20％），然后是black（div宽度的30％）。百分比只是设置上下文，将计算实际长度。

渐变的文档似乎暗示混合是不可能的，即可以设置多个停止的可能性，但它们中的每一个都已淡入（因此没有纯色）。

Answer 1

您可以使用linear-gradient：

使用以下解决方案

body {
  background:grey;
}
div {
  background: linear-gradient(to right, 
    white 0%, white 50%, 
    white 50%, black 70%, 
    black 70%, black 100%);
  height:200px;
  width:100%;
}

<div></div>

Answer 2

答案是肯定的，但如果你想分割多个部分，需要进行一些计算：

background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(127,127,127,1) 70%,rgba(0,0,0,1) 100%); /*

如果你想分割第二部分20/30，那么你需要知道计算黑白之间的中间RGB值，这很容易。其他颜色会更难

是否可以将渐变与纯色混合？

2 个答案: