HTML根据背景区域的亮度改变文本颜色|极客教程

HTML根据背景区域的亮度改变文本颜色

参考： Change text color based on a brightness of the covered background area in HTML

在网页设计中，文本颜色的选择对于用户体验至关重要。合适的文本颜色可以提高可读性，增强信息的传递效果。本文将详细介绍如何根据背景区域的亮度来改变文本颜色，确保文本在不同亮度的背景上都能清晰可见。

示例代码1：纯色背景下的文本颜色变化

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 1</title>
<style>
  .background-dark {
    background-color: #333;
    color: white;
  }
  .background-light {
    background-color: #eee;
    color: black;
  }
</style>
</head>
<body>
<div class="background-dark">
  <p>Visit how2html.com for more info.</p>
</div>
<div class="background-light">
  <p>Visit how2html.com for more info.</p>
</div>
</body>
</html>

Output:

HTML根据背景区域的亮度改变文本颜色

示例代码2：使用JavaScript动态改变文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 2</title>
<style>
  #dynamic-text {
    transition: color 0.5s ease;
  }
</style>
</head>
<body>
<div id="dynamic-background" style="background-color: #999;">
  <p id="dynamic-text">Visit how2html.com for more info.</p>
</div>
<script>
  function adjustTextColor() {
    var bgColor = window.getComputedStyle(document.getElementById('dynamic-background')).backgroundColor;
    var colors = bgColor.substring(bgColor.indexOf('(') + 1, bgColor.lastIndexOf(')')).split(/,\s*/);
    var r = parseInt(colors[0]);
    var g = parseInt(colors[1]);
    var b = parseInt(colors[2]);
    var brightness = (r * 299 + g * 587 + b * 114) / 1000;
    var textColor = brightness > 128 ? 'black' : 'white';
    document.getElementById('dynamic-text').style.color = textColor;
  }
  adjustTextColor();
</script>
</body>
</html>

Output:

HTML根据背景区域的亮度改变文本颜色

示例代码3：渐变背景下的文本颜色变化

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 3</title>
<style>
  .gradient-background {
    background: linear-gradient(to right, #000, #fff);
    color: white;
    text-shadow: 1px 1px 2px black;
  }
</style>
</head>
<body>
<div class="gradient-background">
  <p>Visit how2html.com for more info.</p>
</div>
</body>
</html>

Output:

HTML根据背景区域的亮度改变文本颜色

示例代码4：背景图片下的文本颜色变化

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 4</title>
<style>
  .image-background {
    background-image: url('background.jpg');
    color: white;
    text-shadow: 1px 1px 2px black;
  }
</style>
</head>
<body>
<div class="image-background">
  <p>Visit how2html.com for more info.</p>
</div>
</body>
</html>

Output:

HTML根据背景区域的亮度改变文本颜色

示例代码5：使用CSS滤镜改变背景亮度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 5</title>
<style>
  .filtered-background {
    filter: brightness(50%);
    color: white;
  }
</style>
</head>
<body>
<div class="filtered-background">
  <p>Visit how2html.com for more info.</p>
</div>
</body>
</html>

Output:

HTML根据背景区域的亮度改变文本颜色

示例代码6：根据背景颜色的亮度设置文本阴影

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 6</title>
<style>
  .text-with-shadow {
    background-color: #444;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
</style>
</head>
<body>
<div class="text-with-shadow">
  <p>Visit how2html.com for more info.</p>
</div>
</body>
</html>

Output:

HTML根据背景区域的亮度改变文本颜色

示例代码7：使用CSS变量动态调整文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 7</title>
<style>
  :root {
    --text-color: black;
  }
  .dynamic-color {
    color: var(--text-color);
  }
</style>
</head>
<body>
<div class="dynamic-color" style="--text-color: white;">
  <p>Visit how2html.com for more info.</p>
</div>
</body>
</html>

Output:

HTML根据背景区域的亮度改变文本颜色

示例代码8：使用CSS混合模式改变文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 8</title>
<style>
  .blend-mode {
    background-color: #555;
    color: white;
    mix-blend-mode: difference;
  }
</style>
</head>
<body>
<div class="blend-mode">
  <p>Visit how2html.com for more info.</p>
</div>
</body>
</html>

Output:

HTML根据背景区域的亮度改变文本颜色

示例代码9：使用SVG滤镜改变文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 9</title>
<style>
  .svg-filtered-text {
    filter: url(#brightness-filter);
  }
</style>
</head>
<body>
<svg width="0" height="0">
  <filter id="brightness-filter">
    <feComponentTransfer>
      <feFuncR type="linear" slope="0.5"/>
      <feFuncG type="linear" slope="0.5"/>
      <feFuncB type="linear" slope="0.5"/>
    </feComponentTransfer>
  </filter>
</svg>
<div class="svg-filtered-text">
  <p>Visit how2html.com for more info.</p>
</div>
</body>
</html>

Output:

HTML根据背景区域的亮度改变文本颜色

示例代码10：使用Canvas API动态渲染文本颜色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example 10</title>
</head>
<body>
<canvas id="textCanvas" width="400" height="200"></canvas>
<script>
  var canvas = document.getElementById('textCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.font = '20px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText('Visit how2html.com for more info.', 50, 100);
</script>
</body>
</html>

Output:

HTML根据背景区域的亮度改变文本颜色