1. 使用 filter 属性调整亮度

1.1 基本语法

img {
  filter: brightness(亮度值);
}

1.2 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片亮度调整</title>
<style>
  .img1 {
    width: 200px;
    height: auto;
    filter: brightness(200%);
  }
</style>
</head>
<body>
<img src="example.jpg" alt="Example Image" class="img1">
</body>
</html>

2. 使用 linear-gradient 调整亮度

2.1 基本语法

img {
  mask-image: linear-gradient(to bottom, transparent, black);
}

这个方法会创建一个从顶部到底部的线性渐变，其中黑色区域会被遮盖，从而降低亮度。

2.2 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片亮度调整</title>
<style>
  .img2 {
    width: 200px;
    height: auto;
    mask-image: linear-gradient(to bottom, transparent, black);
  }
</style>
</head>
<body>
<img src="example.jpg" alt="Example Image" class="img2">
</body>
</html>

3. 使用 JavaScript 调整亮度

如果您需要更复杂的亮度调整，或者需要在用户交互时动态调整亮度，可以使用 JavaScript 来实现。

3.1 基本语法

function adjustBrightness(percentage) {
  var img = document.querySelector('img');
  img.style.filter = 'brightness(' + percentage + ')';
}

在这个函数中，percentage 参数表示亮度的百分比。

3.2 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片亮度调整</title>
<script>
function adjustBrightness(percentage) {
  var img = document.querySelector('img');
  img.style.filter = 'brightness(' + percentage + ')';
}
</script>
</head>
<body>
<img src="example.jpg" alt="Example Image">
<button onclick="adjustBrightness(200)">变亮</button>
<button onclick="adjustBrightness(50)">变暗</button>
</body>
</html>