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

Question

我正在阅读有关 gradients 的文章，想知道是否有可能 对于给定的 div，混合纯色和渐变色作为 CSS 的 background.

我是在代表白天和黑夜交替的条形背景下考虑这个问题的：white 代表白天（div 宽度的 50%），然后是渐变从 white 到 black（= dusk，div 宽度的 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值，这很容易。其他颜色会更难

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

Is it possible to mix gradients with solid colors?

css

gradient

background-color