俄羅斯：將審查iPhone等外國(guó)公司設(shè)備 保數(shù)據(jù)安全
iPhone和特斯拉都屬于在各自領(lǐng)域領(lǐng)頭羊的品牌，推出的產(chǎn)品也也都是數(shù)一數(shù)二的，但對(duì)于一些國(guó)家而言，它們的產(chǎn)品可靠性和安全性還是在限制范圍內(nèi)。近日，俄羅斯聯(lián)邦通信、信息技術(shù)
一個(gè)看似簡(jiǎn)單實(shí)則有坑的問(wèn)題：空白網(wǎng)頁(yè)的背景色是什么？
大家是不是都會(huì)認(rèn)為是白色，但事實(shí)并非如此，有時(shí)候我們眼睛看到的也不一定是真的。
比如下面這段代碼：
<!-- ... --><style> body { background-color: skyblue; }</style><body> 前端南玖</body>這樣我們能夠看到整個(gè)頁(yè)面都變成藍(lán)色。
看到這里可能有人會(huì)覺(jué)得是body填充了整個(gè)視圖，但稍微有經(jīng)驗(yàn)的同學(xué)知道，body的高度在沒(méi)定義時(shí)應(yīng)該是里面的內(nèi)容撐起的
不信我們可以為body加上邊框再來(lái)觀(guān)察：
body { background-color: skyblue; border: 1px dashed black;}
那么問(wèn)題又來(lái)了：既然body的高度只有內(nèi)容區(qū)域那部分，那為什么整個(gè)頁(yè)面的背景色都變成了藍(lán)色？
我們可以在w3c規(guī)則中找到Backgrounds of Special Elements這一節(jié)，可以看到這些內(nèi)容：
- 畫(huà)布是呈現(xiàn)文檔的無(wú)限平面。
- 根元素的背景成為畫(huà)布背景，其背景繪制區(qū)域擴(kuò)展到覆蓋整個(gè)畫(huà)布。
看到這兩句話(huà)是不是就能夠理解為什么body的高度只有內(nèi)容區(qū)域那部分，而整個(gè)頁(yè)面的背景色都變成藍(lán)色了。這是因?yàn)楦氐谋尘吧L制再了整個(gè)畫(huà)布上
那這跟空白網(wǎng)頁(yè)的背景是什么顏色也沒(méi)關(guān)系呀？
別急，在w3c規(guī)則中還有這樣一句話(huà)：
?根元素不會(huì)再次繪制這個(gè)背景，也就是說(shuō)，根元素的背景色是透明的。
因?yàn)閷?duì)于瀏覽器來(lái)說(shuō)把根元素背景與畫(huà)布背景繪制成同一個(gè)顏色是沒(méi)有意義的！
影響畫(huà)布的根元素除了body，還有html
比如我們?cè)偌由线@段代碼
html { background-color: red; border: 3px dashed seagreen;}我們?yōu)閔tml加上了背景色及邊框，大家可以思考下此時(shí)的頁(yè)面會(huì)怎樣渲染呢？
這里我們可以看到html的背景色取代了body的背景色成為了畫(huà)布的背景色，而html本身高度也是內(nèi)容撐起的高度。
這樣就能夠證明空白網(wǎng)頁(yè)的根元素背景色是透明的，而不是我們認(rèn)為的白色
既然空白網(wǎng)頁(yè)根元素的背景色是透明的，那我們看到的白色會(huì)不會(huì)是畫(huà)布的顏色呢？
這里我們可以使用CSS中的mix-blend-mode混合顏色來(lái)驗(yàn)證：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .name { color: green; mix-blend-mode: difference } </style></head><body> <div class="name">前端南玖</div></body></html>這里如果畫(huà)布的背景色是白色的話(huà)，那此時(shí)的文字顏色應(yīng)該會(huì)變成粉色 between（綠色 + 白色）= 粉色
但事實(shí)上文字顏色還是綠色，我們?cè)賮?lái)給body添加一個(gè)白色的背景
body { background-color: white; border: 1px dashed black;}.name { color: green; mix-blend-mode: difference}
此時(shí)可以看到文字顏色變成了粉色。
所以這里可以證明空白網(wǎng)頁(yè)的畫(huà)布背景色也是透明的。
上面兩個(gè)例子我們分別證明了空白網(wǎng)頁(yè)的根元素背景色以及畫(huà)布的背景色都是透明的。那么我們看到的“白色”到底是哪里來(lái)的？
在w3c中還有這樣一句話(huà)：
?
如果畫(huà)布背景不是不透明的，則其下方的畫(huà)布表面會(huì)顯示出來(lái)。畫(huà)布表面的紋理取決于 UA（但通常是不透明的白色）。
所以，我們看到的所謂白色其實(shí)是瀏覽器的底色。
本文鏈接：http://www.www897cc.com/showinfo-26-70447-0.html揭開(kāi)空白網(wǎng)頁(yè)背景色的神秘面紗
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)