CSS Filter: Brightness - 如何轻松调整图片和视频的亮度

在设计网页时，我们常常需要根据不同的需求来调节图像或者视频的颜色效果。CSS中的filter:brightness()属性就是用来实现这一功能的强大工具之一。

什么是 brightness()

brightness() 是一种滤镜函数，在应用到元素上后可以改变其颜色值中亮部区域的比例大小。简单来说，它能够增加或减少整个图层上的光线强度——从而达到提高或是降低整体画面明亮度的效果。 语法结构非常简洁明了：

element {
    brightness(value);
}

其中 value 可以为百分比形式 (如 "50%") 或者具体的数值(例如 "-20" 表示将原色系变暗) 。需要注意的是, 当设置负数时会使得原本较浅的部分变得更深；而正向则相反操作使原先偏黑处变得更为光鲜亮丽起来哦！

实际应用场景举例：

假设你正在制作一款在线相册项目并且希望让用户可以根据自己的喜好自由地修改照片色彩风格的话那么就可以考虑利用这个特性啦！比如当你想要给某张风景照增添一些神秘氛围就只需将其调成低饱和度并略微减小一点对比即可完成任务~

接下来我们就一起来看看如何通过简单的几步代码就能快速掌握这项技能吧～

使用方法一：基本配置方式

如果你只是想让某个特定部分变得更加醒目可以通过以下这种方式来进行尝试:

<div style="width: auto;height:auto;overflow:hidden;">
   <img src="/path/to/image.jpg">
</div>
<style type='text/css'>
 div img{
     width : calc(100vw * .8); /* 设置宽度占屏幕比例 */
 }
 div { 
      background-color:#fff;
      padding-top:.5em;padding-bottom:.5em;border-radius:.3rem;-webkit-filter:brightness(.7);/* 调整亮度参数*/
       filter:brightness(.7);  
 }   
</style>    

这里我们将背景设定成了白色且设置了圆角边框同时又加上了一个轻微模糊特效以便于更好地展示出所要处理对象本身细节特征之外还特意加入了 -webkit- 前缀用于兼容旧版 Safari 浏览器版本问题。

方法二 ：动态变化控制

当然如果还想进一步提升用户体验体验那不妨试试看下面这种结合 JavaScript 功能一起使用的办法吧!

function changeBrightness(){
 let bright = document.getElementById('myImage');
 if(bright.style.filter == 'none'){
        bright.style.filter= '-webkit-brightness(-20%)'; // 高反差模式下显示出来更明显些；
    }else{        
         bright.style.filter='-webkit-brightness(+20%)';
    };
};
document.querySelector('#toggle').addEventListener("click",changeBrightness)

这段脚本主要是借助事件监听机制实现了点击按钮切换两种不同状态的功能当我们首次加载页面的时候默认情况下是关闭该样式但只要触发相应动作之后便能立即生效无需等待刷新过程结束才得以显现结果嘛!