如何根据<div>元素的高度或宽度更改其颜色？

Question

我想要做的是根据一个div元素的高度来改变它的颜色。

例如： 如果这个div的高度小于等于20％，我希望它是绿色的，如果高度超过20％，它应该是蓝色的。

我希望只使用CSS来实现这一点（如果可能的话）。

- user11220917

---

在 CSS 中不可能实现这个。 - Terry

你有任何代码吗？div的大小如何？你的问题不太清楚。从你提供的细节来看，CSS无法做到这一点。也许上下文可以给出一些提示。 - G-Cyrillus

不可能自动完成，如果您手动设置高度并插入代码，则可以实现。 - novruzrhmv

这可能通过使用诸如less或sass之类的_css预处理器_来使用条件语句实现，但前提是您手动设置高度。最好使用类似Javascript的东西。 - Lewis

一个div本身不应该仅通过纯CSS来改变高度。 如果您想要例如全屏div并且想要在屏幕调整大小时更改颜色，则可以使用媒体查询。 - toffler

可能是Can media queries resize based on a div element instead of the screen?的重复问题。 - jeffjenx

Answer 1

这是一个利用渐变背景的技巧，你可以依靠 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>

- Temani Afif