偷吃闪光弹！——Chrome HDR Bug 初探

⚠前排提示：此特性仅限于较新版本的Chrome和Chromium内核浏览器，随时有可能失效，不要用在生产环境上

唐突诈尸（bushi

前几天冲浪时候发现这个项目GitHub – ardov/hdr-web: Demo of using HDR colors in CSS↗，可以通过hdr提高内容亮度。复现原理大概是使用一张hdr图片激活广色域，再通过设置body和目标元素的background的值即可

另外不知道为什么这个bug资料为什么这么少，全网翻下来只有寥寥几个项目🤔

效果复现

需要准备一个HDR图片用来触发HDR，建议使用avif格式

复现代码

body {
    /*触发条件之一，需要指定body的bg颜色*/
    background: lightgray;
}
/*给需要高亮的元素设置一个p3色域的颜色,需要任意值大于1*/
p {
    background: color(display-p3 200% 200% 200%);
}

<!--hdr图片,不可隐藏-->
<img src="hdr.avif" alt="">

<p>hdr test</p>

效果

已知问题

动画keyframs中两个关键帧之间不能使用同样opacity值,否则会失效

另外触发后无法远程调试

DEMO

flash_bomb

注意音量