广告位联系
返回顶部
分享到

CSS颜色混合的五种实现方式介绍

css 来源:互联网 作者:佚名 发布时间:2023-07-03 23:06:15 人浏览
摘要

如果出现一种颜色就定义一个变量,每次都要维护多个颜色变量太麻烦了。有没有办法只用一个颜色呢?在这里也就是,如何将一个颜色变浅一点?这样做的好处是,如果需要更换主题

如果出现一种颜色就定义一个变量,每次都要维护多个颜色变量太麻烦了。有没有办法只用一个颜色呢?在这里也就是,如何将一个颜色变浅一点?这样做的好处是,如果需要更换主题色,只用修改一个变量就行了。

在项目中经常会碰到需要邻近色的场景,比如将一个颜色变深(浅)一点,下面是一个按钮的选中态

如果出现一种颜色就定义一个变量,每次都要维护多个颜色变量太麻烦了。有没有办法只用一个颜色呢?在这里也就是,如何将一个颜色变浅一点?这样做的好处是,如果需要更换主题色,只用修改一个变量就行了,如下: 

下面盘点我用过的一些方法。

一、透明度

这应该是最容易想到的方式。将一个元素透明度降低不就颜色变浅了吗?

假设 HTML是这样的(下同)。

1

<button style="--primary-color: #3981E6">#3981E6</button>

不过这种方式需要借助单独一层标签,通常可以用伪元素生成,关键实现如下:

1

2

3

4

5

button::before{

  content: '';

  background: var(--primary-color);

  opacity: 0.2

}

效果还是非常不错的,下面是多种主题色的效果。

不过这种方式也有局限,比如伪元素不够用怎么办?还有绝对定位引起的层级问题。

没关系,还有其他方式,接着往下看。

二、多重背景

大家可能都知道,CSS3 背景是支持多重背景的,并且层级是越来越低的。

因此,我们可以在主题色上覆盖一层半透明的白色,依然可以将原有颜色“减淡”。

由于这里是背景图,所以需要用到渐变,而不是颜色。比如希望主题色减淡到自身的20%?,可以覆盖80%透明度的白色,实现如下:

1

2

3

4

button{

  background: linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)), /*半透明白色*/

    linear-gradient(var(--primary-color), var(--primary-color));

}

这样就无需借助额外的标签或者伪元素了,效果如下:

不过这种方式也有一些缺陷,比如仅适合背景层,如果希望box-shadow、outline这些就不行,这些属性没法叠加多层背景。

三、动画

主要原理是动画播放次数也是支持小数的,比如设置一个从蓝色到白色的动画,播放次数为??0.8???,那么在播放到??80%??的地方就停下来了,这样就得到了颜色减淡的效果,示意如下:

具体实现如下:

1

2

3

4

5

6

7

8

9

10

11

12

button{

  animation: lighterBackgroundColor .001s 0.8 linear forwards;

  /*播放次数为0.8*/

}

@keyframes lighterBackgroundColor {

  from {

    background-color: var(--primary-color)

  }

  to{

    background-color: #fff

  }

}

效果也很棒。

相比前一种方式,就没有背景的限制了,任意属性都可以,但是每出现一个属性就需要单独一个动画(因为动画变化的就是属性本身),如果要加一个减淡后的outline-color,应该要这么实现。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

button{

  animation: lighterBackgroundColor .001s 0.8 linear forwards,

    lighterOutlineColor .001s 0.8 linear forwards; /*outline*/

  /*播放次数为0.8*/

}

@keyframes lighterBackgroundColor {

  from {

    background-color: var(--primary-color)

  }

  to{

    background-color: #fff

  }

}

/*设置一个outline的动画*/

@keyframes lighterOutlineColor {

  from {

    outline-color: var(--primary-color)

  }

  to{

    outline-color: #fff

  }

}

太繁琐了,有没有简单一点的方法呢?

四、自定义属性动画

上面将属性作为动画有点浪费,因为变化值都是一样的,有没有办法复用呢?

当然可以,将 CSS 变量作为动画对象,比如--lighterColor。

1

2

3

4

5

6

7

8

9

10

11

12

button{

  animation: lighterColor .001s 0.8 linear forwards;

  /*播放次数为0.8*/

}

@keyframes lighterColor {

  from {

    --lighterColor: var(--primary-color)

  }

  to{

    --lighterColor: #fff

  }

}

但是,仅仅这样是不够的,动画并不认识这样的变量,根本不会有动画(就像display一样)。

为了让自定义变量也支持动画,需要通过@property定义一下。

@property - CSS:层叠样式表 | MDN (mozilla.org)[1]?。

1

2

3

4

5

@property --lighterColor {

  syntax: '<color>';

  inherits: false;

  initial-value: #fff;

}

相比前面的方式,但是适用性更佳,--lighterColor?已经是一个独立的变量了,可以用在任意属性上,比如加个outline。

1

2

3

4

button{

  background-color: var(--lighterColor);

  outline: 4px solid var(--lighterColor);

}

可以看到,outline也轻易地实现了颜色减淡。

缺点就是,兼容性欠佳,目前firefox还不支持

五、color-mix()

最后介绍一个最近正式支持(Chrome 110+)的颜色混合函数:color-mix()[2]。

这个算是官方的解决方案了,如果这个普遍支持了,前面的方法都可以不用了,下面简单介绍一下。

1

2

color-mix(in lch, peru 40%, lightgoldenrod);

color-mix(in srgb, #34c9eb 20%, white);

前面的in lch?表示色彩空间,我们一般只用srgb就足够了,后面的两个颜色就需要混合的颜色了。

这里的百分比就是混合比例了,如果我们要实现减淡80%?的操作,可以将主题色的比例设置为20%,白色会自动填充剩余比例,如下:

1

2

3

4

5

button{

  --lighterColor: color-mix(in srgb, var(--primary-color) 20%, #fff);

  background-color: var(--lighterColor);

  outline: 4px solid var(--lighterColor);

}

效果如下(Chrome 110+)。

目前还不适合使用,过两年再说吧。

下面是所有方案的效果对比,基本是一致的。

完整 demo 可以访问以下任意链接:

  • CSS color lighter (juejin.cn)[3]
  • CSS color lighter (codepen.io)[4]
  • CSS color lighter (runjs.work)[5]

六、总结一下优缺点

以上共介绍了5种不同的颜色混合实现方式,各有优缺点,下面分别从以下几个方面比较一下

  • 实现成本:实现思路的复杂度,是否容易想到。
  • 适应性:能否适应各种场景。
  • 代码复用性:实现是否啰嗦,是否需要额外标签。
  • 兼容性:能否大规模使用。

 

实现成本

适应性

代码复用性

兼容性

透明度

??(低)

??(差)

??(低)

??????(好)

多重背景

??

??

??

??????

动画

??????(高)

????

????

??????

自定义属性动画

????

??????(强)

??????

????

color-mix

??

??????

??????(高)

??(差)

总的来说,自定义属性动画在各方面是比较推荐的,如果不考虑firefox的话基本可以放心使用了,其他方式也可以根据实际需求自行选择,哪个方便用哪个。

参考资料

[1]@property - CSS:层叠样式表 | MDN (mozilla.org): https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property?。

[2]color-mix(): https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix?。

[3]CSS color lighter (juejin.cn): https://code.juejin.cn/pen/7206605166953365563?。

[4]CSS color lighter (codepen.io): https://codepen.io/xboxyan/pen/dyqRyVG?。

[5]CSS color lighter (runjs.work): https://runjs.work/projects/91dcf9cdd9f7447b?。


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/weixin_42232156/article/details/129935780
相关文章
  • CSS设置背景颜色透明的两种方法介绍
    1,通过background和opacity设置背景颜色透明 background属性中属性值比较简单,所以我们简单看看opacity属性 opacity属性参数的不透明度是以数字表
  • CSS颜色混合的五种实现方式介绍
    如果出现一种颜色就定义一个变量,每次都要维护多个颜色变量太麻烦了。有没有办法只用一个颜色呢?在这里也就是,如何将一个颜色变
  • CSS3中的box-flex弹性盒属性布局介绍
    box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高、水平均分、按比例划分。但是它有一定的局
  • JS/CSS压缩工具(YUI Compressor)使用方法

    JS/CSS压缩工具(YUI Compressor)使用方法
    YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。方便快捷,压缩后的代码文件体积小,有效率高,当然市面上不乏有很多压
  • CSS中的z-index属性介绍
    本文主要是对z-index属性进行详细的讲解,包括其使用场景、属性效果、适用范围等等。本博客的所有代码执行的浏览器环境,都是以Chrome浏
  • CSS中的hover属性使用方法介绍
    css 的 hover 属性是一种伪类选择器,它可以用来在鼠标悬停在某个元素上时改变该元素或其子元素、同级元素、相邻元素的样式 。hover 属性
  • CSS中外边距塌陷的八种解决方法
    margin-top塌陷是在CSS的盒子模型中出现的一种现象,描述的是当父元素包裹着一个子元素的时候,当给子元素设置margin-top属性时,此时只是想
  • 什么是clearfix (一文搞清楚css清除浮动clearfix)
    clearfix 是一种 CSS 技巧,可以在不添加新的 html 标签的前提下,解决让父元素包含浮动的子元素的问题。这个技巧的版本是很多的,最流行的
  • 如何利用css var函数让你的组件样式输出规范样式
    我们平时在使用Elementui Antdesing这些UI库时,难免会碰到使用deep强行侵入式去修改组件内部样式的情况;比如下列代码,我们需要把ant的分页
  • 纯CSS实现了下划线的交互动画效果

    纯CSS实现了下划线的交互动画效果
    最近看到了一个特别炫酷的网站上的一个小细节,下划线的动画。看下他的实现效果。 但是,假如我们左边并没有足够的空间存放一条不可
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计