CSS brightness() 语法
在 CSS 中，brightness() 函数一般作为 filter 属性的值，用于改变元素（比如图片或背景）的亮度值，它能让元素看起来更亮或更暗。
语法：
filter: brightness(值);说明：
控制亮度的值，可以用百分比（如 100%）或无单位数字（如 1）。
- 100% 或 1：元素保持原始亮度。
- 0% 或 0：元素完全变黑。
- 大于 100% 或 1：元素变得更亮。
- 小于 100% 或 1：元素变得更暗。
对于 brightness() 函数，小伙伴们需要清楚以下几点。
CSS brightness() 摘要
| 属于 | CSS 滤镜 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS brightness() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS brightness() 函数是如何使用的。
示例 1：brightness() 用于调整亮度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
filter: brightness(150%);
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>页面效果如下图所示。
分析：
filter: brightness(150%) 表示将图片的亮度调高为原来的 150%（会更亮）。
示例 2：brightness() 动态调整亮度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
filter: brightness(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: brightness(50%);
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到图片上时，页面效果如下图 2 所示。
分析：
在这个例子中，我们使用 transition 属性来实现了一个过渡效果。当鼠标移到图片上时，图片会从正常亮度（100%）平滑过渡到较暗的亮度（50%）。
示例 3：brightness() 与其他滤镜函数组合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
filter: brightness(80%) contrast(120%);
}
</style>
</head>
<body>
<img src="imgs/bird.jpg" alt="">
</body>
</html>页面效果如下图所示。
分析：
filter: brightness(80%) contrast(120%);上面这句代码表示同时使用 brightness() 和 contrast() 这 2 个滤镜函数。其中，brightness(80%) 表示降低亮度，它会使得图片变暗。contrast(120%) 表示增加对比度，它会使得颜色更加分明。
