HSL色彩模型

  • 色相（HUE）：在基础色轮上分布的颜色，也称为纯色，纯色是不含黑、白、灰的颜色。
  • 饱和度（SATURATION）：是指颜色的鲜亮程度，在纯色中加入灰色，会降低色彩的饱和度。100%是纯色，没有灰色阴影。50%是50%的灰色，0%是完全灰色。下图是饱和度从100%到0%的变化。
  • 明暗度（LIGHTNESS）：是指颜色的色彩的明暗程度，在纯色中加入黑色或白色，会改变颜色的明暗度。其中0%表示全暗（黑色），100%表示全明（白色），50%是即不明也不暗。

HSL色彩模型就是色相、饱和度和明暗度三者混合组成的颜色模型。表示为 hsla(hue, saturation, lightness)。

filter基础使用

filter

filter属性的含义

  • brightness() 让图像更明亮或更暗淡，0% 将创建全黑图像，100% 展示原图，大于100%展示更明亮的图片效果。
  • contrast() 增加或减少图像的对比度，值是0%图像全灰图像，没有对比度。100% 展示原图，大于100%展示对比度更高的图片效果。
  • saturate() 超饱和或去饱和输入的图像，值为0% 则是完全不饱和，完全转为灰度图像，100% 展示原图，大于100% 则有更高的饱和度。
  • grayscale() 改变图像灰度，值在 0% 到 100% 之间，值为0%展示原图，值为100% 则完全转为灰度图像。
  • blur() 模糊图像。传入值单位为px
  • drop-shadow() 给图片添加阴影，与box-shadow的属性值一样。
  • hue-rotate() 改变图整体色调，angle设定图像会被调整的色环角度值。值为0deg展示原图，大于360deg相当于又绕一圈。
  • invert() 反转图像颜色,值在 0% 和 100% 之间,100% 的价值是完全反转。值为 0% 则图像无变化。
  • opacity()改变图像透明度，值在 0% 和 100% 之间，值为 0% 则是完全透明，值为 100% 则图像无变化。
  • sepia()将图像转为棕褐色，值在 0% 到 100% 之间，值为 100% 则完全是深褐色的，值为 0% 图像无变化。


链接：https://juejin.cn/post/7004379703255498759