前端如何调整网页整体的亮度?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1207 天前的主题，其中的信息可能已经有所发展或是发生改变。

如题,前一段时间看到个挺炫酷的效果,就是有人在网页上做了个拖动条,前后拖动就可以像手机屏幕一样让整个页面里的所有元素变暗或者变亮。这种效果是怎么实现的？

拖动条

网页

炫酷

效果

2 条回复 • 2021-08-07 22:23:40 +08:00

3dwelcome

2021-08-07 22:04:25 +08:00 via Android

大概率是 css 里的 filter 滤镜，就和网页整体变黑白一个原理。

xiangyuecn

2021-08-07 22:23:40 +08:00

var ddd=document.createElement("div");document.body.appendChild(ddd);
ddd.style="position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;background:#000;opacity:1";

setInterval(function(){ddd.style.opacity-=0.01},100);

简单粗暴的一个实现，遮罩层滤光