CSS的发展:关于CSS的color-mix函数的探讨

我总是喜欢深入研究网络上出现的新的和奇妙的东西,今天我要看看 color-mix 函数,在写这篇文章的时候,它还没有在任何稳定的浏览器中出现,但已经在火狐浏览器中出现了一个标志。

color-mix 的作用是什么?

color-mix 函数允许你混合颜色(谁会想到呢),这些颜色可以是命名的颜色、十六进制的颜色或任何种类的颜色,真的。这非常令人兴奋,因为它允许我们添加一些类似于 SCSS 的功能,如 lightendarken 甚至 adjust-color 的alpha。

为什么会有色彩空间

色彩空间是另一回事。色彩空间是一种以数学方式定义一组颜色的方法。使用不同的色彩空间可以代表不同的颜色。自然,这意味着在不同的色彩空间中混合颜色会产生不同的结果。

这是Surma在谷歌工作时的一段视频,其中对色彩空间的探讨比我更详细。

实践例子

我举了一个非常快的例子,说明你可以做的一些事情。正如我之前提到的,这些代码在没有标志的情况下无法在稳定的浏览器中运行,所以我也上传了一张结果的图片。

我举了一个非常快速的例子来说明你可以做的一些事情。正如我前面提到的,这段代码中无一能在稳定的浏览器中运行而不需要标志,所以我也上传了一张结果的图片。

我所做的例子是

  • 通过与黑色混合使西红柿变暗、
  • 与白色混合后,茶色变浅
  • 紫色通过与透明色混合变得不透明(技术上似乎是一种颜色)。
  • 红色混入绿色

CSS的发展:关于CSS的color-mix函数的探讨_第1张图片

小结

看到像这样的小功能出现在css中,使它变得更加强大,真是太酷了,也许有一天我们根本不需要css预处理器,特别是在谈论css嵌套的时候。非常令人兴奋。

你可能感兴趣的:(前端开发知识&教程,css,前端)