如果一个css变量的值大于某个给定值，则隐藏HTML元素。

Question

如果一个CSS变量的值大于零，我希望隐藏一个元素。我可以让相反情况起作用：

#container {
  display: flex;
  width: 100%;
  height: 30px;
  border: 1px soild black;
}

.item {
  opacity: max(calc( var(--ind)*1), 0);
/* or clamp(var(--ind), 0 , 1);*/
  width: 30px;
  height: 100%;
}

<div id="container">
  <div class="item" style="--ind: 0;background-color:red;"></div>
  <div class="item" style="--ind: 1;background-color:orange;"></div>
  <div class="item" style="--ind: 2;background-color:yellow;"></div>
  <div class="item" style="--ind: 3;background-color:green;"></div>
  <div class="item" style="--ind: 4;background-color:blue;"></div>
</div>

然而，我希望上面的示例仅显示红色正方形。有人知道如何用纯CSS实现吗？

- Lee

---

opacity: max(calc(1 - var(--ind)*1), 0); 这个怎么样？ - Amaury Hanser

@AmauryHanser 很棒！为什么不把它发布为答案，我会点赞/接受。 - Lee

不透明度：min(calc(1-var(--ind)*1), 1)也可以工作 :-) - Lee

*1 也是多余的（最初来自实验） - Lee

很高兴它对你有用！ - Amaury Hanser

Answer 1

#container {
  display: flex;
  width: 100%;
  height: 30px;
  border: 1px soild black;
}

.item {
  opacity: min(calc( 1 - var(--ind)), 1);
  width: 30px;
  height: 100%;
}

<div id="container">
  <div class="item" style="--ind: 0;background-color:red;"></div>
  <div class="item" style="--ind: 1;background-color:orange;"></div>
  <div class="item" style="--ind: 2;background-color:yellow;"></div>
  <div class="item" style="--ind: 3;background-color:green;"></div>
  <div class="item" style="--ind: 4;background-color:blue;"></div>
</div>

- Lee