为了解决这两个问题,CSS 颜色规范在CSS Color Module Level 6[26] 又推出了一个新的规范 --color-contrast。 利用color-contrast,选择高对比度颜色 color-contrast 函数标记接收一个color[27] 值,并将其与其他的color[28] 值比较,从列表中选择最高对比度的颜色。 利用这个 CSS 颜色函数,可以完美的解决上述的...
p{/** 任意背景色 **/--bg:#ffcc00;background:var(--bg);color:color-contrast(var(--bg) vs#fff,#000);/** 基于背景色,自动选择对比度更高的颜色 **/} 这样,上面的 DEMO 最终效果就变成了: 完整的 DEMO 和代码,你可以戳这里:CodePen Demo -- CSS Relatvie Color Adapt BG 此方案的优势在于...
color: #ab8a05; } 在之前,我们介绍过一种利用滤镜filter: contrast()或者filter: brightness()的统一解决方案,无需写多个颜色值,可以根据 Normal 状态下的色值,通过滤镜统一实现更亮、或者更暗的伪类颜色。 在今天,我们也可以利用 CSS 相对颜色来做这个事情: div { --bg: #fc0; background: var(--bg);...
用到对比度滤镜(contrast),在前面的基础上再叠加一层,再用到反转滤镜(invert),颠倒黑白。 前端侦探 .box{ width:300px; height:300px; color:#ffeb3b; background-color: currentColor; .text{ font-size:30px; filter:grayscale(1)contrast(999)invert(1); } } 效果如下: 下面用一张图来表示转换...
p{color:#ffcc00;transition:.3s all;}/* Hover 伪类下为 B 颜色 */p:hover{color:#ffd21f;}/** Active 伪类下为 C 颜色 **/p:active{color:#ab8a05;} 在之前,我们介绍过一种利用滤镜filter: contrast()或者filter: brightness()的统一解决方案,无需写多个颜色值,可以根据 Normal 状态下的色值,通...
color: #ffd21f; } /** Active 伪类下为 C 颜色 **/ p:active { color: #ab8a05; } 在之前,我们介绍过一种利用滤镜filter: contrast()或者filter: brightness()的统一解决方案,无需写多个颜色值,可以根据 Normal 状态下的色值,通过滤镜统一实现更亮、或者更暗的伪类颜色。
--color: rgb(255, 0, 0); color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); /* result = rgb(0, 255, 0) */ } 效果如下,我们就得到绿色字体: 解释一下: 原本的红色颜色,我们把它设置为 CSS 变量--color: rgb(255, 0, 0) ...
Here is the CodePen example for CSS color-contrast(). So, let’s take a quick look at this feature by setting some background colors and text colors. :root { --primary-background: #1e1e1e; } .content { Background-color: var(--primary-background); color: color-contrast(var(--...
使用color-contrast() 了解了上述前置知识之后,就很容易了解color-contrast()的作用了。 举个例子: 代码语言:javascript 复制 {background-color:#fff;color:color-contrast(#fff vs #000,#666,#ddd);} 这里,背景色是白色#fff,需要设置文本颜色,通过color-contrast(#fff vs #000, #666, #ddd),将 #fff 依...
background-color: #fff; color: color-contrast(#fff vs #000, #666, #ddd); } 这里,背景色是白色#fff,需要设置文本颜色,通过color-contrast(#fff vs #000, #666, #ddd),将 #fff 依次与 #000、#666、#ddd 比较,这 3 种颜色与白色的对比度分别是 21、5.74、1.35,21 对比度最大,展示最为清晰,...