如果 css var 大于某个值,则隐藏 html 元素
Hide an html element if a css var is greater than some value
如果 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)?
#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>
如果 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)?
#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>