如何更改< div>的颜色元素取决于其高度还是宽度? [英] How to change the color of <div> Element depending on its height or width?

问题描述

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

So what i wanna do is change the Color of an div Element depending on its height.

例如:如果div的高度< = 20％，我希望它是绿色，如果它的高度超过20％，则应该是蓝色.

For example: If the div has a height of <= 20% i want it to be green, if its above 20% it should be blue.

我想仅使用CSS实现此操作(如果可能的话)

I want to achieve this only using css (if this is possible)

推荐答案

这里有一个带有渐变背景的技巧，您可以依靠 background-size 并重复进行.想法是使大小为负值(无着色)或为正值，而重复进行，您将获得完整的着色.

Here is a trick with gradient background where you can rely on background-size and repeat. The idea is to eiher have a negative value of size (no coloration) or positive value and with the repeat you will have a full coloration.

这里是一个示例，其中我定义了3个范围:从0到100像素(橙色)，从100像素到200像素(蓝色)，大于200像素(红色).

Here is an example where I am defining 3 ranges: from 0 to 100px (orange), from 100px to 200px (blue), bigger than 200px (red).

我正在手动设置高度，但是可以根据内容自动设置高度:

I am setting the height manually but it can be set automatically by the content:

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

同样可以使用宽度(调整屏幕大小以进行测试):

The same can work with width too (resize the screen to test):

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

我们也可以将相同的技巧扩展到文本着色:

We can expand the same trick to text coloration too:

.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

Finally, we can have border, text and background at the same time (Doesn't work on 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>

对于以上所有内容，我们都可以得到一种颜色，该颜色取决于高度和宽度.

For all the above we can have a coloration that depends on the height and the width together.

这是一个交互式演示:

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

这篇关于如何更改&lt; div&gt;的颜色元素取决于其高度还是宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！