我想要做的是根据一个div元素的高度来改变它的颜色。
例如: 如果这个div的高度小于等于20%,我希望它是绿色的,如果高度超过20%,它应该是蓝色的。
我希望只使用CSS来实现这一点(如果可能的话)。
我想要做的是根据一个div元素的高度来改变它的颜色。
例如: 如果这个div的高度小于等于20%,我希望它是绿色的,如果高度超过20%,它应该是蓝色的。
我希望只使用CSS来实现这一点(如果可能的话)。
这是一个利用渐变背景的技巧,你可以依靠 background-size
和 repeat 属性。其思路是当尺寸有负值时不进行着色,有正值且使用 repeat 属性时则能完全填充颜色。
以下是一个示例,我定义了三个范围:从 0 到 100px(橙色),从 100px 到 200px(蓝色),大于 200px(红色)。
我手动设置高度,但它也可以通过内容自动设置:
.box {
min-height:50px;
margin:10px;
border:1px solid;
background:
linear-gradient(red,red) left/100% calc(100% - 200px),
linear-gradient(blue,blue) left/100% calc(100% - 100px),
orange;
}
<div class="box"></div>
<div class="box" style="height:120px"></div>
<div class="box" style="height:220px"></div>
同样也可以使用宽度(调整屏幕大小以测试):
.box {
min-height:50px;
margin:10px;
border:1px solid;
background:
linear-gradient(red,red) left/calc(100% - 800px) 100%,
linear-gradient(blue,blue) left/calc(100% - 600px) 100%,
orange;
}
<div class="box"></div>
我们也可以将相同的技巧扩展到文本颜色上:
.box {
min-height:50px;
margin:10px;
font-size:20px;
border:1px solid #000;
background:
linear-gradient(red,red) left/100% calc(100% - 200px),
linear-gradient(blue,blue) left/100% calc(100% - 100px),
orange;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
<div class="box"> I am an orange text</div>
<div class="box" style="height:120px"> I am a blue text</div>
<div class="box" style="height:220px"> I am a red text</div>
同样适用于边框:
.box {
min-height:50px;
margin:10px;
border:5px solid transparent;
background:
/*Background coloration (color padding-box)*/
linear-gradient(red,red) padding-box,
linear-gradient(blue,blue) padding-box,
linear-gradient(orange,orange) padding-box,
/*Border coloration (color the border-box)*/
linear-gradient(purple,purple) border-box,
linear-gradient(green,green) border-box,
linear-gradient(#000,#000) border-box;
background-size:
100% calc(100% - 200px),
100% calc(100% - 100px),
100% 100%;
}
<div class="box"></div>
<div class="box" style="height:120px"></div>
<div class="box" style="height:220px"></div>
最后,我们可以同时拥有边框、文本和背景(在Firefox上由于一个错误而无法使用)
.box {
min-height:50px;
margin:10px;
font-size:25px;
border:5px solid transparent;
background:
/*Text coloration*/
linear-gradient(yellow,yellow) ,
linear-gradient(grey,grey) ,
linear-gradient(#fff,#fff),
/*Background coloration*/
linear-gradient(red,red),
linear-gradient(blue,blue),
linear-gradient(orange,orange),
/*Border coloration*/
linear-gradient(purple,purple),
linear-gradient(green,green),
linear-gradient(#000,#000);
background-size:
100% calc(100% - 200px),
100% calc(100% - 100px),
100% 100%;
-webkit-background-clip:
text,text,text,
padding-box,padding-box,padding-box,
border-box,border-box,border-box;
background-clip:
text,text,text,
padding-box,padding-box,padding-box,
border-box,border-box,border-box;
-webkit-text-fill-color: transparent;
color: transparent;
}
<div class="box">some text here</div>
<div class="box" style="height:120px">some text here</div>
<div class="box" style="height:220px">some text here</div>
我们可以根据高度和宽度共同来确定颜色。
这里有一个交互演示:
.box {
padding:10px;
display:inline-block;
margin:10px;
font-size:20px;
resize:both;
overflow:auto;
border:1px solid;
background:
linear-gradient(green,green),
linear-gradient(red,red),
linear-gradient(blue,blue),
linear-gradient(orange,orange),
yellow;
background-size:
calc(100% - 400px) calc(100% - 300px),
calc(100% - 400px) calc(100% - 200px),
calc(100% - 200px) calc(100% - 100px),
calc(100% - 100px) calc(100% - 50px);
}
<div class="box">resize me</div>