CSS 动态按百分比调整颜色较浅或较深

在本文中，我们将介绍如何使用CSS动态地按百分比调整颜色，使其变得较浅或较深。在网页设计和开发中，颜色是非常重要的，它可以用来增强用户体验、传达信息和营造氛围。动态调整颜色的能力可以帮助我们实现更加灵活的设计效果。

阅读更多：CSS 教程

背景知识

在了解如何动态调整颜色之前，我们需要了解一些关于颜色表示的基础知识。在CSS中，颜色通常使用十六进制表示法（Hexadecimal Notation）来表示，例如#FFFFFF表示白色，#000000表示黑色。每个颜色由红（R）、绿（G）、蓝（B）三个颜色分量组成，每个颜色分量的取值范围是0到255，其中0代表最暗的颜色，255代表最亮的颜色。

CSS变量和calc()函数

在CSS中，我们可以使用变量（Variables）和calc()函数来进行动态的颜色调整。

CSS变量

CSS变量可以用来定义并保存一个值，然后在整个样式表中使用。我们可以通过设置CSS变量的值来实现动态调整颜色。首先，我们需要定义一个CSS变量，然后使用var()函数来调用它。下面是一个使用CSS变量调整颜色较浅或较深的示例：

:root {
  --main-color: #FF0000;
}

.box {
  background-color: var(--main-color);
}

.lighter {
  background-color: lighten(var(--main-color), 20%);
}

.darker {
  background-color: darken(var(--main-color), 20%);
}

在上面的示例中，我们定义了一个名为–main-color的CSS变量，并将其值设置为红色（#FF0000）。然后，我们通过使用var()函数将这个CSS变量应用到.box元素的背景颜色上。接着，我们使用lighten()函数将–main-color的亮度增加20%，并将其应用到.lighter类的元素上；使用darken()函数将–main-color的亮度降低20%，并将其应用到.darker类的元素上。这样，我们就可以通过调整CSS变量的值来动态地改变颜色的亮度。

calc()函数

calc()函数可以用于对数值进行计算。我们可以使用calc()函数来动态地计算颜色的分量值，从而实现调整颜色较浅或较深的效果。下面是一个使用calc()函数调整颜色较浅或较深的示例：

.box {
  --r: 255;
  --g: 0;
  --b: 0;
  background-color: rgb(var(--r), var(--g), var(--b));
}

.lighter {
  --r-lighter: calc(var(--r) + (255 - var(--r)) * 0.2);
  --g-lighter: calc(var(--g) + (255 - var(--g)) * 0.2);
  --b-lighter: calc(var(--b) + (255 - var(--b)) * 0.2);
  background-color: rgb(var(--r-lighter), var(--g-lighter), var(--b-lighter));
}

.darker {
  --r-darker: calc(var(--r) * 0.8);
  --g-darker: calc(var(--g) * 0.8);
  --b-darker: calc(var(--b) * 0.8);
  background-color: rgb(var(--r-darker), var(--g-darker), var(--b-darker));
}

在上面的示例中，我们使用–r、–g和–b这三个CSS变量来保存红、绿、蓝三个颜色分量的值，并使用rgb()函数将它们组合为一个颜色。然后，我们通过使用calc()函数来计算颜色较浅或较深的值。在.lighter类中，我们使用计算公式calc(var(--r) + (255 - var(--r)) * 0.2)来计算较浅的颜色值，其中0.2表示增加20%的亮度。在.darker类中，我们使用计算公式calc(var(--r) * 0.8)来计算较深的颜色值，其中0.8表示降低20%的亮度。

通过使用CSS变量和calc()函数，我们可以灵活地调整颜色的亮度，实现更加自由和多样化的设计效果。

示例应用

让我们通过一个示例来说明如何使用CSS动态地按百分比调整颜色。假设我们有一个按钮，当鼠标悬停在按钮上时，按钮的背景颜色会变浅；当鼠标离开按钮时，按钮的背景颜色会恢复原样。下面是一个实现这个效果的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      --main-color: #FF0000;
      background-color: var(--main-color);
      color: #FFFFFF;
      padding: 10px 20px;
      cursor: pointer;
    }

    .button:hover {
      --hover-color: lighten(var(--main-color), 20%);
      background-color: var(--hover-color);
    }
  </style>
</head>
<body>
  <button class="button">Hover Me</button>
</body>
</html>

在上面的示例中，我们定义了一个名为.button的类，其中–main-color变量保存了按钮的主要颜色（红色），并将其应用到按钮的背景颜色上。当鼠标悬停在按钮上时，我们使用hover伪类定义了一个名为–hover-color的CSS变量，并使用lighten()函数将按钮的主要颜色变浅20%。然后，我们将–hover-color应用到按钮悬停状态时的背景颜色上。这样，当鼠标悬停在按钮上时，按钮的背景颜色会变浅，离开按钮时会恢复原样。