时间戳

首页 > 解决方案 > 根据百分比渐变确定颜色

html - 根据百分比渐变确定颜色

问题描述

我正在寻找一种基于渐变百分比确定纯色的方法。基本上像下图

渐变色标

我已经使用 CSS 来获取渐变，但我无法弄清楚如何从该渐变中选择纯色。这是渐变的 CSS：

background-image: linear-gradient(to bottom, #00b050 20%, #4ac148 40%, #74d13e, #9de031, #c6ee21, #dbe508, #eedb00, #ffd000, #ffad00, #ff8700, #ff5b00, #ff0000);

最坏的情况是，我可以在该渐变上分配 0-100 的 RGB 值并使用它。但是，我不禁认为必须有更好的编程方式来解决这个问题。

任何帮助都会很有用。

标签： htmlcssangular

解决方案

一个想法是使渐变非常大，然后将其调整background-position为具有一种颜色或至少近似它：

.box {
  background-image: linear-gradient(to right, #00b050 20%, #4ac148 40%, #74d13e, #9de031, #c6ee21, #dbe508, #eedb00, #ffd000, #ffad00, #ff8700, #ff5b00, #ff0000);
  background-size:10000% 100%;
  border:10px solid;
  width:50px;
  height:100px;
  display:inline-block;
}
<div class="box" style="background-position:20% 0"></div>
<div class="box" style="background-position:40% 0"></div>
<div class="box" style="background-position:50% 0"></div>
<div class="box" style="background-position:60% 0"></div>
<div class="box" style="background-position:70% 0"></div>
<div class="box" style="background-position:80% 0"></div>
<div class="box" style="background-position:100% 0"></div>

推荐阅读