沃梦达 / 编程问答 / 前端问题 / 正文

使用CSS线性渐变(非平滑颜色)生成纯色

沃梦达教程前端问题

2022-01-01

Generate solid colors using CSS linear-gradient (not smooth colors)(使用CSS线性渐变(非平滑颜色)生成纯色)

本文介绍了使用CSS线性渐变(非平滑颜色)生成纯色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我的线性css渐变如下：

background: linear-gradient(to right, red 0%, green 20%, blue 40%, purple 60%, yellow 80%, black 100%)

它将生成如下所示的CSS渐变：

如何使用纯色制作相同的渐变，而不在颜色之间进行过渡？(使用CSS)

类似以下内容：

谢谢

推荐答案

这样

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.gradient {
  width: 500px;
  height: 200px;
  background: linear-gradient(to right, 
      red    20%, 
      green  20%, 
      green  40%, 
      blue   40%, 
      blue   60%, 
      purple 60%, 
      purple 80%, 
      yellow 80%,
      yellow 100%
  );
}

<div class="gradient"></div>

这篇关于使用CSS线性渐变(非平滑颜色)生成纯色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：使用CSS线性渐变(非平滑颜色)生成纯色

上一篇：在VS代码中完成Firebase的代码？

下一篇：有可能在大元素上制作硬边渐变吗？