程序员经验分享-hwhale

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

2024-03-24

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

例如： 如果 div 的高度

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


这是一个你可以信赖的渐变背景技巧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 上不起作用）由于错误 https://bugzilla.mozilla.org/show_bug.cgi?id=1571244)

.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

如何根据
元素的高度或宽度更改其颜色？ 的相关文章

  • 强制输入数字小数位

    我想强制

  • CSS: *html #id_name

    我有这个代码 html alertBox height 100px modalContainer gt alertBox position fixed 这是由CSS支持的吗 我在其他网站上找到了这段代码 我忘记了链接 html alertB

  • 如何向 CSS 形状添加偏移轮廓？

    我在创建带有斜角边缘的块时遇到了一些问题 此外我需要一个斜角的边框并稍微偏离主块 问题是这个块可以根据屏幕响应 不知道具体的方法 希望大家帮忙 这就是我现在所做的 box display flex padding 20px height 2

  • 删除圆形图像周围的边框

    我有一个圆形图像 png 文件 中间是透明的 我需要将图像内的背景设置为纯色 为此 我将背景设为纯色 然后将border radius 50 但这会产生一条丑陋的小白线 有没有办法摆脱这个问题 或者我必须在图像编辑器中手动为图像着色 div

  • .Net 中是否有与 HTML 等效的 XmlReader？

    我用过Html敏捷包 http html agility pack net z codeplex过去在 Net 中解析 HTML 但我不喜欢它只使用 DOM 模型 在大型文档和 或具有大量嵌套的文档上 可能会遇到堆栈溢出或内存不足异常 另外

  • Javascript 使事件点击和语音识别与多个按钮一起工作

    所以我正在使用 webkitSpeechRecognition 并且它工作得很好 但问题是我想同时在多个地方使用它 当我将它添加到页面上的另一个部分时 它无法正常工作 这是它自己工作的情况 var final transcript var

  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这

  • 如何在 Lift 框架中添加新页面

    如何在 lift 中的 webapp 目录中添加一个可供用户访问的新页面 目前只能通过index html访问http localhost 8080 com http localhost 8080 or http localhost 808

  • 位图内存不足错误

    我对这个错误有疑问 我从 URL 制作网站图标解析器 我这样做是这样的 public class GrabIconsFromWebPage public static String replaceUrl String url StringB

  • 水平滚动的表格上的“粘性”标题......完全不可能？

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro

  • 我怎样才能让这个脚本在 WordPress 上运行？

    我有这个脚本 document ready function text1 click function this hide 代码html div class div1 p class text1 text to appear when th

  • 更改API数据输出的布局

    我是 API 集成和 PHP 的新手 我最近将 VIN 解码器集成到我的应用程序中 在输入框中输入车辆的 VIN 选择提交 然后就会显示 API 数据库中有关该车辆的所有信息 数据存储为关联数组 其中包含类别及其相应元素 例如 对于 VIN

  • 如何在 select 和 option 标签中添加 JSON 数据？

    我有这个html代码 div class searchfilter div class searchwrapper div div

  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用

  • 如何使用 CSS 媒体查询检测设备方向？

    在 JavaScript 中 可以使用以下方式检测方向模式 if window innerHeight gt window innerWidth portrait true else portrait false 但是 有没有一种方法可以仅

  • 如何在画布上所有其他内容后面绘制图像？ [复制]

    这个问题在这里已经有答案了 我有一块画布 我想用drawImage在画布上当前内容后面绘制图像 由于画布上已经有内容 我正在使用字面上的画布来创建包含图像的画布 因此我无法真正先绘制图像 所以我无法使用drawImage在我呈现其余内容之前

  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code

  • 如何简化这个 LESS CSS Box-shadow mixin？ （带有“方向”的多个阴影）

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir

  • Service Worker 与 Shared Worker

    Service Worker 和 Shared Worker 有什么区别 我什么时候应该使用 Service Worker 而不是 Shared Worker 反之亦然 Service Worker 具有共享 Worker 之外的附加功能

  • Facebook 点赞按钮消失

    我的网站中的 Facebook Like 按钮出现问题 添加此代码 由 facebook 提供 按钮在创建时正确显示在任何页面中

随机推荐

  • 计算结构大小而不填充字节的函数

    您好 我想创建一个函数来计算结构的大小而不填充字节 例子 struct test int x char y int z 如果我计算上述结构的大小 我必须得到 9 个字节 即没有填充字节 并考虑我可能不知道结构中存在的变量的情况 例子 str

  • 为什么 Octave、R、Numpy 和 LAPACK 在同一矩阵上产生不同的 SVD 结果？

    我使用 Octave 和 R 通过一个简单的矩阵来计算 SVD 并得到两个不同的答案 代码如下 R gt a lt matrix c 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 1 1 1 0 0 0

  • 简单 C++ - 关于字符串和串联以及将 int 转换为字符串 [重复]

    这个问题在这里已经有答案了 可能的重复 在 C 中将 int 转换为 string 的最简单方法 https stackoverflow com questions 5590381 easiest way to convert int to

  • Laravel 5 和 Eloquent 数据库中两个日期之间的关系

    我是 Laravel 5 的初学者 我有一个表 用户 其中包含 CreateDate Type 和 Channel 列 我有一个用户列表 我在视图中选择 Trans StartDate Trans EndDate Type 和 Channe

  • 熄灯 - 寻找最差的初始状态

    我有一个围绕一个小游戏的任务 叫做熄灯 https en wikipedia org wiki Lights Out game Game 该游戏由尺寸为 3x3 的棋盘组成 其中每个单元格可以为 1 或 0 例如 0 1 0 1 1 0 0

  • HTTP 标头 If-None-Match: * 是什么意思？

    以下 HTTP 1 1 标头是什么意思 如果无匹配 当使用强或弱 ETag 甚至 ETag 列表时我理解它 但我不明白它在使用星号 时的用途 Edit 最好有一些伪代码 PHP 代码也很好 来显示如何 什么回答 If None Match

  • 用于 jquery 数据表服务器端处理的 Spinner

    我有一个带有服务器端处理的 jquery 数据表版本 1 10 一切正常 然而 我的要求是为每个 ajax 调用显示一个微调器 而不是默认的 正在处理 消息 尝试了多种方法但没有任何作用 这是我的代码 table pp DataTable

  • 如何创建一个预先填写“说明”的 HTML 表单，当用户单击该框时，该说明会清晰可见？

    我有一个 HTML 表单 如下所示

  • 更改 DecimalFormat 区域设置

    我有定制DecimalFormat在 Edittext 的 addTextChangedListener 方法中 一切工作正常 但是当我更改语言 区域设置 时 我的 addTextChangedListener 不起作用 double an

  • 如何等待异步函数？

    My case let waiting function return new Promise resolve gt console log awaiting setTimeout function resolve 1000 let wai

  • Clang 可以使用 GCC 编译的 .a 库来编译代码吗？

    我的项目目前在 gcc 下编译 它使用Boost ZeroMQ作为静态 a图书馆和一些 so像 SDL 这样的库 我想一路叮当响 但不是现在 我想知道是否可以编译使用的代码 a and so在 gcc 下用 clang 编译的库 是的 就是

  • 如何从 Node.js 打开终端应用程序？

    我希望能够打开Vim从终端中运行的node js程序中 创建一些内容 保存并退出Vim 然后抓取文件的内容 我正在尝试做这样的事情 filename tmp tmpfile process pid editor process env ED

  • 动态将 RewriteBase 设置为当前文件夹路径

    有没有办法将 RewriteBase 设置为相对于主机根目录的当前文件夹 htaccess 文件所在的文件夹 的路径 我有一个 CMS 如果我将其移动到主机中的目录 它将无法工作 除非我将 RewriteBase 设置为相对于主机根目录的目

  • 具有不同行布局的游标适配器

    我正在尝试创建一个自定义光标适配器 它将根据光标中的某些数据使用两种不同的布局 我一直在阅读 重写 getViewTypeCount 和 getItemViewType 来实现这一点 但我似乎不知道如何实现这一点 这是我的 bindView

  • 在 pandas 数据帧中插入多索引

    我需要插入多索引数据帧 例如 这是主要数据框 a b c result 1 1 1 6 1 1 2 9 1 2 1 8 1 2 2 11 2 1 1 7 2 1 2 10 2 2 1 9 2 2 2 12 我需要找到以下结果 1 3 1 7

  • 缺少 Ionic 网络本机插件的提供程序

    我尝试过使用 Ionics 本机插件 Network 但由于据称缺少提供程序而失败 为了避免任何错误 我全新安装了 Ionic 和所需的依赖项 ionic cordova plugin add cordova plugin network

  • Glassfish 3.1.2 和 Eclipse

    我刚刚下载了 Glassfish 版本 3 1 2 这还不是正式版本 我需要这个版本 因为我的 Web 应用程序正在使用 websockets 我现在遇到的问题是 Eclipse 的 Glassfish 插件 他无法识别新的 Glassfi

  • 什么可能导致作业无法完成？

    我正在使用 C 开发一个项目 由于某种原因 当我尝试为枚举变量赋值时 分配不会发生 我会复制我的代码 但这实际上只是一个简单的作业 它是这样的 testVar MyEnum TYPE OF ENUM where testVar属于类型MyE

  • Scrapy从div中获取href

    我开始在一个小项目中使用Scrapy 但无法提取链接 每次找到该类时 我只得到 而不是 url 我错过了一些明显的东西吗 sel Selector response for entry in sel xpath div class reci

  • 如何根据

    所以我想做的是根据 div 元素的高度更改它的颜色 例如 如果 div 的高度 我只想使用 css 来实现这一点 如果可能的话 这是一个你可以信赖的渐变背景技巧background size并重复 这个想法是要么具有负的大小值 无着色 要么

热门标签