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

Posted 2023-03-06

【中文标题】如何根据 <div> 元素的高度或宽度更改其颜色？

【英文标题】：How to change the color of <div> Element depending on its height or width?

【发布时间】：2021-11-06 03:44:02

【问题描述】：

所以我想做的是根据高度更改 div 元素的颜色。

例如： 如果 div 的高度

我只想使用 css 来实现这一点（如果可能的话）

【问题讨论】：

不要认为这在 CSS 中是可能的。

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

自动不可以，如果手动设置高度插入代码就可以了

这可能通过 css 预处理器 实现，例如使用条件语句的 less 或 sass，然后仅 如果您手动设置高度。最好使用 javascript 之类的东西。

一个 div 本身应该能够用纯 css 改变高度。如果你想拥有例如全屏 div 并希望在调整屏幕大小时更改颜色，您可以使用媒体查询

【参考方案1】：

这是一个渐变背景的技巧，您可以依赖background-size 并重复。这个想法是要么有一个负值的大小（无着色）或正值，重复你将有一个完整的着色。

这是一个示例，我定义了 3 个范围：从 0 到 100 像素（橙色）、从 100 像素到 200 像素（蓝色）、大于 200 像素（红色）。

我是手动设置高度，但可以通过内容自动设置：

.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 due to a bug）

.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>