如何实现任意背景色Div状态切换时自动深浅变色及文本色适配

针对你需要对任意Div元素（无论初始背景色）实现背景色深浅调整、自动适配文本颜色的需求，以下是两种实用方案：

方案1：CSS相对颜色语法（现代浏览器推荐） #

利用CSS相对颜色语法，直接基于元素原始背景色的HSL属性调整亮度，无需手动指定各状态颜色值，同时结合系统颜色实现文本适配。

核心CSS代码 #

.button {
  /* 基础样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border-radius: 130px;
  cursor: pointer;
  font-weight: 500;
  font-size: 50px;
  font-family: "Lexend", sans-serif;
  user-select: none;
  background-color: var(--bg-color, #0084ff); /* 自定义基础背景色 */
  color: CanvasText; /* 自动适配系统文本色 */
  transition: all 0.2s ease;
}

/* 选中状态：调深背景色10% */
.button.selected {
  background-color: color(from var(--bg-color) h s l - 10%);
  color: white;
}

/* 悬停状态：调深背景色20% */
.button:hover {
  background-color: color(from var(--bg-color) h s l - 20%);
  color: white;
}

/* 点击状态：调浅背景色30% */
.button:active {
  background-color: color(from var(--bg-color) h s l + 30%);
  color: black;
}

原理说明 #

color(from var(--bg-color) h s l - 10%) 通过相对颜色语法提取原始背景色的色相（h）、饱和度（s）、亮度（l）属性，直接调整亮度值实现深浅变化，支持任意初始背景色（包括白、黑、灰色系）。

方案2：兼容旧浏览器的Filter+JS方案 #

如果需要兼容不支持相对颜色语法的旧浏览器，可通过伪元素+filter调整背景亮度，配合JavaScript计算背景亮度自动切换文本颜色。

CSS代码 #

.button {
  /* 基础样式 */
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border-radius: 130px;
  cursor: pointer;
  font-weight: 500;
  font-size: 50px;
  font-family: "Lexend", sans-serif;
  user-select: none;
  background-color: var(--bg-color, #0084ff);
  color: var(--text-color, #000);
  transition: color 0.2s ease;
}

.button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
  z-index: -1;
  transition: filter 0.2s ease;
}

.button.selected::before {
  filter: brightness(0.9); /* 调深10% */
}

.button:hover::before {
  filter: brightness(0.8); /* 调深20% */
}

.button:active::before {
  filter: brightness(1.3); /* 调浅30% */
}

JavaScript代码（文本颜色适配） #

// 计算背景亮度并设置文本颜色（WCAG标准）
function adjustTextColor(element) {
  const bgColor = window.getComputedStyle(element).backgroundColor;
  const [r, g, b] = bgColor.match(/\d+/g).map(Number);
  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  element.style.setProperty('--text-color', luminance > 0.5 ? '#000' : '#fff');
}

// 初始化所有按钮
document.querySelectorAll('.button').forEach(btn => {
  adjustTextColor(btn);
  // 监听状态变化重新计算文本颜色
  btn.addEventListener('mouseenter', () => adjustTextColor(btn));
  btn.addEventListener('mouseleave', () => adjustTextColor(btn));
  btn.addEventListener('click', () => {
    btn.classList.toggle('selected');
    adjustTextColor(btn);
  });
});

原理说明 #

• 伪元素::before承载背景色并应用filter: brightness()实现深浅调整，避免影响文本；
• JavaScript通过计算背景色的亮度值（WCAG标准），自动切换文本为黑色或白色，确保可读性。

完整测试示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dynamic Button Styles</title>
  <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@500&display=swap" rel="stylesheet" />
  <style>
    body {
      display: flex;
      gap: 15px;
      align-items: center;
      height: 100vh;
      justify-content: center;
      margin: 0;
    }

    .button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
      border-radius: 130px;
      cursor: pointer;
      font-weight: 500;
      font-size: 50px;
      font-family: "Lexend", sans-serif;
      user-select: none;
      background-color: var(--bg-color, #0084ff);
      color: CanvasText;
      transition: all 0.2s ease;
    }

    .button.selected {
      background-color: color(from var(--bg-color) h s l - 10%);
      color: white;
    }

    .button:hover {
      background-color: color(from var(--bg-color) h s l - 20%);
      color: white;
    }

    .button:active {
      background-color: color(from var(--bg-color) h s l + 30%);
      color: black;
    }

    /* 测试不同背景色的按钮 */
    .button.white { --bg-color: #ffffff; color: #000; }
    .button.black { --bg-color: #000000; color: #fff; }
    .button.grey { --bg-color: #888888; }
  </style>
</head>
<body>
  <div class="button" onclick="theFunction()">Click Me</div>
  <div class="button selected" onclick="theFunction()">Selected</div>
  <div class="button white" onclick="theFunction()">White Btn</div>
  <div class="button black" onclick="theFunction()">Black Btn</div>
  <div class="button grey" onclick="theFunction()">Grey Btn</div>

  <script>
    function theFunction(){
        console.log("woho");
    }
  </script>
</body>
</html>

这个示例中，无论按钮初始背景色是蓝色、白色、黑色还是灰色，选中、悬停、点击状态都会自动调整背景深浅，文本颜色也会适配确保可读性。

内容的提问来源于stack exchange，提问作者Sam