CSS 加深颜色

在 CSS 中，我们可以通过调整颜色的亮度、饱和度和对比度等属性来改变颜色的深浅程度。本文将介绍如何在 CSS 中加深颜色。

改变颜色亮度

通过 brightness() 函数可以调整颜色的亮度，该函数的参数为一个百分比值，可以是正值和负值。如下所示：

color: brightness(50%); /* 加深 50% */
color: brightness(150%); /* 加深 150% */
color: brightness(-50%); /* 变浅 50% */

改变颜色饱和度

通过 saturate() 函数可以调整颜色的饱和度，该函数的参数为一个百分比值，可以是正值和负值。如下所示：

color: saturate(50%); /* 饱和度加强 50% */
color: saturate(-50%); /* 饱和度减弱 50% */

改变颜色对比度

通过 contrast() 函数可以调整颜色的对比度，该函数的参数为一个百分比值，可以是正值和负值。如下所示：

color: contrast(50%); /* 对比度加强 50% */
color: contrast(-50%); /* 对比度减弱 50% */

改变颜色透明度

通过 rgba() 函数可以改变颜色的透明度，该函数有四个参数，分别为红、绿、蓝和透明度。其中透明度的值为 0 到 1 的一个浮点数，0 表示完全透明，1 表示完全不透明。

color: rgba(255, 0, 0, 0.5); /* 红色半透明 */

总结

本文介绍了在 CSS 中加深颜色的几种方法，包括改变颜色亮度、饱和度、对比度和透明度等属性。通过这些方法，我们可以很方便地对颜色进行加深处理，让网站更具美感。