請打開https://fff.kidi.ng這個網頁看一看,你感覺是文本“White.”的顏色更白,還是其背景色更白呢?
域名中的fff是簡寫的十六進制顏色代碼,表示白色
在 2020 年產、采用了 Intel i5 處理器的 MacBook 上,使用 Safari 瀏覽器打開https://fff.kidi.ng,看到的效果如下(試著截一下圖就知道這里為什么不得不貼照片了):

是文字更白,還是背景色更白呢?我們用 macOS 自帶的取色工具 Digital Color Meter 來檢測一下。


文字的顏色為RGB(255,255,255)即白色(雖然看起來是淺灰色),再來看背景色。

也是一模一樣的RGB(255,255,255),竟然也是白色!可明明背景色看起來更白啊。
其實理論上不存在更白的白色,因為白色本身是光的完全反射,包含了所有波長的光,通常認為是“無色”的合成。然而,在某些視覺效果或極端的亮度表現下,有些“白色”看起來確實更亮或更純凈。
https://github.com/kiding/wanna-see-a-whiter-white上總結了出現這種現象需要滿足的幾個條件:
首先瀏覽器需要支持顯示HDR(High Dynamic Range,高動態范圍)的內容。這種瀏覽器能夠提供更高的亮度、對比度和更廣的色域,帶來更加逼真的視覺體驗。
第 2 個條件是頁面中要包含一段 HDR 視頻,以使瀏覽器進入 HDR 模式。注意到圖中中心位置明亮的白色小方塊了嗎?那不是拍照時屏幕的反光,而是一個小視頻。查看網頁源代碼,可以看到對應的

最后一個觸發條件是一段 CSS 代碼:
#whiter {
filter:brightness(10);
backdrop-filter:brightness(1);
}
brightness(10)將元素的亮度增加了 10 倍,而brightness(1)表示背景亮度保持默認值(1是標準亮度值)。
然而,為什么滿足以上條件就會形成這一怪象,其中的具體原因還不完全清楚。
另外,在不同設備或不同瀏覽器上看到的結果可能還不一樣。有時是文字“White.“更亮:

而在手機上的 Safari 中,有可能一開始看不到 “White.“,直到點擊下方的分享按鈕,這個”白色幽靈“才會出現。
-
瀏覽器
+關注
關注
1文章
1043瀏覽量
37086 -
safari瀏覽器
+關注
關注
0文章
3瀏覽量
7716
原文標題:蘋果Safari瀏覽器上的一個怪象——更白的白色
文章出處:【微信號:OSC開源社區,微信公眾號:OSC開源社區】歡迎添加關注!文章轉載請注明出處。
發布評論請先 登錄
MAX1561:高效26V升壓轉換器為白色LED照明助力
無需安裝!在瀏覽器里就能玩轉ESP32/ESP8266,這個神器絕了!
Microsoft Edge瀏覽器iOS端插件功能上線
亞馬遜云科技推出Amazon Nova Act SDK預覽版,加速瀏覽器自動化Agent落地
微軟Microsoft Edge瀏覽器構筑立體式安全防線
性能再升級!開鴻Bot系列V4.1.2.78.002版本發布
##DevEco Studio##如何讓模擬器里有圖片?【文件拖入法】
鑫金暉 | 白油板污染問題自動化解決方案
電線一根黑線一根白線代表什么線
老電視如何安裝瀏覽器?
一站式端到端解決方案,更智能、更高效地做出決策!
edge瀏覽器識別 latex語法插件
ESP32運行網頁服務器 (Web-Server)-入門篇
蘋果Safari瀏覽器上的一個怪象:更白的白色
評論