CSS 带颜色范围的条件格式

Question

我希望使用 div 和 span 创建一个基本图表，并希望根据设置其高度的值对图表中的每一列应用条件格式。 我无法破解的技巧是我想让它 function 有点像此处示例中的 Excel 条件格式：

颜色在一个范围内（从浅到深）。 有没有一种简单的方法可以做到这一点？ 我可以看到如何将 static 值应用于 static 颜色，但希望我可以对颜色范围做一些事情，例如 excel 示例。

因此，下面的屏幕截图显示了一个柱形图，其中每一列都有不同的橙色阴影，由列的值决定：

列越接近 25，颜色越深。同样，值越低，橙色阴影越浅。

Answer 1

听起来您的目标是根据值在两个 colors 之间的某处为条着色。 如果是这种情况，您可以使用 css 动画来模拟颜色渐变。

这个想法是这样的：

• 设置 animation 将背景设置为两个 colors 之一。 这有效地计算了两个 colors 之间的梯度。 您可以使用@keyframes和animation执行此操作。
• 暂停 animation，因为我们不希望它实际播放。 这是通过animation-play-state完成的。
• Select animation 中的特定帧以获得正确的中间颜色。 这可以通过负animation-delay来完成。

 .bars { display: flex; justify-content: space-evenly; }.bar { animation: color-gradient 25s linear 1; animation-fill-mode: forwards; animation-play-state: paused; width: 3em; } @keyframes color-gradient { from { background: red; } to { background: blue; } }

 <div class="bars"> <div class="bar" style="height: 5em; animation-delay: -5s;"></div> <div class="bar" style="height: 10em; animation-delay: -10s;"></div> <div class="bar" style="height: 15em; animation-delay: -15s;"></div> <div class="bar" style="height: 20em; animation-delay: -20s;"></div> <div class="bar" style="height: 25em; animation-delay: -25s;"></div> </div>

如果需要，可以通过使 animation 持续时间超过 25 秒来调整粒度。

Answer 2

我将提供两个选项，也许您可以根据您的需要提供更多详细信息。

第一个可能不是您想要的，因为它根据特定高度设置特定渐变。 只会为此提供一个 Codepen。 https://codepen.io/jfirestorm44/pen/yLMNPPM?editors=1100

下一个是我认为你想要的更多。 如果您知道条形图的最大高度，则可以使用它来设置linear-gradient上的渐变中断。

更新：HTML

<div id="container">
  <div id="first" class="bar"></div>
  <div id="second" class="bar"></div>
  <div id="third" class="bar"></div>
  <div id="fourth" class="bar"></div>
  <div id="fifth" class="bar"></div>
</div>

SCSS

.bar {
  @for $i from 1 through 5 {
    $height: 20px * $i;
    $light: 75% + $i * -5;
    &:nth-child(#{$i}) {
      position: absolute;
      bottom: 50%;
      left: 20% + ($i * 10%);
      width: 20px;
      height: $height;
      font-size: 25px;
      transform: translate(-80%, 0);
      background: hsl(35, 100%, $light);
    }
  }
}

更新的 Codepen： https://codepen.io/jfirestorm44/pen/jOBPopj?editors=1100

添加一个 JS 选项：

 let inputNum = document.getElementById("number"); let button1 = document.getElementById("button1"); let border = document.getElementById("border"); let dropDown = document.getElementById("cars"); function color() { if (inputNum.value > 0) { let bar = document.createElement("div"); bar.classList.add("bar"); border.appendChild(bar); let bars = document.getElementsByClassName("bar"); let carName = document.createElement("p"); carName.classList.add("carType"); carName.textContent = cars.options[cars.selectedIndex].text; border.appendChild(carName); let names = document.getElementsByClassName("carType"); let height = inputNum.value * 26; for (let i = 0; i < bars.length; i++) { names[names.length - 1].style.top = "275px"; names[names.length - 1].style.left = -5 + i * 30 + "px"; bars[bars.length - 1].style.height = height + "px"; bars[bars.length - 1].style.backgroundColor = "hsl(35, 100%," + (75 - height / 5.2) + "%)"; bars[bars.length - 1].style.left = 10 + i * 30 + "px"; } } }

 #container { position: absolute; top: 40px; left: 0; width: 400px; height: 300px; } #border { position: relative; left: 100%; top: 0; width: 90%; height: 90%; border-left: 2px solid grey; border-bottom: 2px solid grey; transform: translate(-100%, 0); } #numberContainer { position: relative; left: -5%; }.num { line-height: 10px; }.num:before { content: ""; position: absolute; left: 18px; width: 100%; height: 10px; border-bottom: 1px lightgrey solid; }.bar { position: absolute; bottom: 0; width: 20px; } #button1 { position: relative; top: 0; width: 60px; height: 20px; }.car { position: absolute; top: 10px; }.carType { position: absolute; bottom: -85px; writing-mode: vertical-rl; text-orientation: upright; }

 <div id="container"> <div id="border"> <div id="numberContainer"> <p class="num">10</p> <p class="num">9</p> <p class="num">8</p> <p class="num">7</p> <p class="num">6</p> <p class="num">5</p> <p class="num">4</p> <p class="num">3</p> <p class="num">2</p> <p class="num">1</p> <p class="num">0</p> </div> </div> </div> <input type="number" min="0" max="10" value="0" id="number"/> <label for="cars">Choose a car:</label> <select name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <button type="button" onclick="color()" id="button1">Submit</button>

Answer 3

[编辑] 这个答案只有 colors 从左到右的条，左边的颜色最浅。

我会让容器有一个白色的背景，条形是黑色的，然后在所有东西上添加一个渐变，在一个设置mixed-blend-mode: lighten只为黑色条着色。

作为奖励，我添加了另一个具有重复线性渐变的伪元素，该渐变由真正的浅灰色组成，以创建水平线。 然后我添加了mixed-blend-mode: darken到这个元素，使它们出现在条形“下方”。

我还通过随机化每个条形的 CSS 属性来随机化条形的高度。

此解决方案可扩展，因此无论您有多少条，您仍然可以在所有条上获得渐变，而无需更改 CSS 代码。

 let bars = document.querySelectorAll('.bar'); function randomize(max, min) { min = min || 0; return Math.floor(Math.random() * (max - min) + min); } for (const bar of bars) { bar.style.setProperty('--bar-height', `${randomize(10, 2)}rem`); }

 .container { position: relative; display: inline-flex; margin-left: 4.5rem; align-items: flex-end; background-color: #fff; padding: 0px 1rem; }.container::before, .container::after { content: ''; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; }.container::before { background: linear-gradient(to right, #fbe5d6, #843c0c); mix-blend-mode: lighten; }.container::after { background: repeating-linear-gradient(to top, #f4f1f1, #f4f1f1 1px, transparent 1px, transparent 1rem); z-index: 10; mix-blend-mode: darken; }.bar { width: 1.5rem; height: var(--bar-height); background-color: #000; }.bar +.bar { margin-left: 3rem; }

 <div class="container"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div>

Answer 4

结合我和贾斯汀的答案，但对于香草 CSS。

这个答案是使用 HSL 和 CSS 变量来设置颜色和高度。

随机值

 let bars = document.querySelectorAll('.bar'); function randomize(max, min) { min = min || 0; return Math.floor(Math.random() * (max - min) + min); } for (const bar of bars) { let maxValue = 25; let randomValue = randomize(maxValue, 2); let height = randomValue/2; let hue = '24deg'; let saturation = '82%'; let maxHue = 90; let minHue = 30; let hueRange = maxHue - minHue; let lightness = `${maxHue - hueRange * (randomValue/maxValue)}%`; bar.style.setProperty('--bar-height', `${height}rem`); bar.style.setProperty('--color-background-bar', `hsl(${hue}, ${saturation}, ${lightness})`); }

 .container { display: inline-flex; margin-left: 4.5rem; align-items: flex-end; padding: 0px 1rem; background: repeating-linear-gradient(to top, #eee, #eee 1px, transparent 1px, transparent 1rem); }.bar { width: 1.5rem; height: var(--bar-height); background-color: var(--color-background-bar); }.bar +.bar { margin-left: 3rem; }

 <div class="container"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div>

增加值

Static 值从 5 到 25 不等，如 OP 的图片所示。

 let bars = document.querySelectorAll('.bar'); bars.forEach((bar, index) => { let maxValue = 25; let customValue = 5 + index * 5; let height = customValue/2; let hue = '24deg'; let saturation = '82%'; let maxHue = 90; let minHue = 30; let hueRange = maxHue - minHue; let lightness = `${maxHue - hueRange * (customValue/maxValue)}%`; bar.style.setProperty('--bar-height', `${height}rem`); bar.style.setProperty('--color-background-bar', `hsl(${hue}, ${saturation}, ${lightness})`); });

 .container { display: inline-flex; margin-left: 4.5rem; align-items: flex-end; padding: 0px 1rem; background: repeating-linear-gradient(to top, #eee, #eee 1px, transparent 1px, transparent 1rem); }.bar { width: 1.5rem; height: var(--bar-height); background-color: var(--color-background-bar); }.bar +.bar { margin-left: 3rem; }

 <div class="container"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div>