日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

揭開空白網頁背景色的神秘面紗

來源: 責編: 時間:2024-02-01 12:51:05 213觀看
導讀前言一個看似簡單實則有坑的問題:空白網頁的背景色是什么?大家是不是都會認為是白色,但事實并非如此,有時候我們眼睛看到的也不一定是真的。頁面根元素背景色比如下面這段代碼:<!-- ... --><style> body { background-

前言

一個看似簡單實則有坑的問題:空白網頁的背景色是什么?zwY28資訊網——每日最新資訊28at.com

大家是不是都會認為是白色,但事實并非如此,有時候我們眼睛看到的也不一定是真的。zwY28資訊網——每日最新資訊28at.com

頁面根元素背景色

比如下面這段代碼:zwY28資訊網——每日最新資訊28at.com

<!-- ... --><style>  body {    background-color: skyblue;  }</style><body>    前端南玖</body>

這樣我們能夠看到整個頁面都變成藍色。zwY28資訊網——每日最新資訊28at.com

zwY28資訊網——每日最新資訊28at.com

看到這里可能有人會覺得是body填充了整個視圖,但稍微有經驗的同學知道,body的高度在沒定義時應該是里面的內容撐起的zwY28資訊網——每日最新資訊28at.com

不信我們可以為body加上邊框再來觀察:zwY28資訊網——每日最新資訊28at.com

body {  background-color: skyblue;  border: 1px dashed black;}

zwY28資訊網——每日最新資訊28at.com

那么問題又來了:既然body的高度只有內容區域那部分,那為什么整個頁面的背景色都變成了藍色?zwY28資訊網——每日最新資訊28at.com

我們可以在w3c規則中找到Backgrounds of Special Elements這一節,可以看到這些內容:zwY28資訊網——每日最新資訊28at.com

  1. 畫布是呈現文檔的無限平面。
  2. 根元素的背景成為畫布背景,其背景繪制區域擴展到覆蓋整個畫布。

看到這兩句話是不是就能夠理解為什么body的高度只有內容區域那部分,而整個頁面的背景色都變成藍色了。這是因為根元素的背景色繪制再了整個畫布上zwY28資訊網——每日最新資訊28at.com

那這跟空白網頁的背景是什么顏色也沒關系呀?zwY28資訊網——每日最新資訊28at.com

別急,在w3c規則中還有這樣一句話:zwY28資訊網——每日最新資訊28at.com

?根元素不會再次繪制這個背景,也就是說,根元素的背景色是透明的。zwY28資訊網——每日最新資訊28at.com

因為對于瀏覽器來說把根元素背景與畫布背景繪制成同一個顏色是沒有意義的!zwY28資訊網——每日最新資訊28at.com

影響畫布的根元素除了body,還有htmlzwY28資訊網——每日最新資訊28at.com

比如我們再加上這段代碼zwY28資訊網——每日最新資訊28at.com

html {  background-color: red;  border: 3px dashed seagreen;}

我們為html加上了背景色及邊框,大家可以思考下此時的頁面會怎樣渲染呢?zwY28資訊網——每日最新資訊28at.com

zwY28資訊網——每日最新資訊28at.com

這里我們可以看到html的背景色取代了body的背景色成為了畫布的背景色,而html本身高度也是內容撐起的高度。zwY28資訊網——每日最新資訊28at.com

這樣就能夠證明空白網頁的根元素背景色是透明的,而不是我們認為的白色zwY28資訊網——每日最新資訊28at.com

畫布背景色

既然空白網頁根元素的背景色是透明的,那我們看到的白色會不會是畫布的顏色呢?zwY28資訊網——每日最新資訊28at.com

這里我們可以使用CSS中的mix-blend-mode混合顏色來驗證:zwY28資訊網——每日最新資訊28at.com

<!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>

這里如果畫布的背景色是白色的話,那此時的文字顏色應該會變成粉色 between(綠色 + 白色)= 粉色zwY28資訊網——每日最新資訊28at.com

zwY28資訊網——每日最新資訊28at.com

但事實上文字顏色還是綠色,我們再來給body添加一個白色的背景zwY28資訊網——每日最新資訊28at.com

body {  background-color: white;  border: 1px dashed black;}.name {  color: green;  mix-blend-mode: difference}

zwY28資訊網——每日最新資訊28at.com

此時可以看到文字顏色變成了粉色。zwY28資訊網——每日最新資訊28at.com

所以這里可以證明空白網頁的畫布背景色也是透明的。zwY28資訊網——每日最新資訊28at.com

瀏覽器底色

上面兩個例子我們分別證明了空白網頁的根元素背景色以及畫布的背景色都是透明的。那么我們看到的“白色”到底是哪里來的?zwY28資訊網——每日最新資訊28at.com

在w3c中還有這樣一句話:zwY28資訊網——每日最新資訊28at.com

?zwY28資訊網——每日最新資訊28at.com

如果畫布背景不是不透明的,則其下方的畫布表面會顯示出來。畫布表面的紋理取決于 UA(但通常是不透明的白色)。zwY28資訊網——每日最新資訊28at.com

所以,我們看到的所謂白色其實是瀏覽器的底色。zwY28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-70447-0.html揭開空白網頁背景色的神秘面紗

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 前端性能優化 — 保姆級 Performance 工具使用指南

下一篇: 一篇文章帶你了解JavaScript for循環

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 旬邑县| 丹江口市| 大同县| 米易县| 峨山| 琼中| 正定县| 泗阳县| 调兵山市| 靖江市| 怀来县| 龙海市| 个旧市| 新蔡县| 都安| 诏安县| 凤台县| 黄梅县| 永年县| 中阳县| 通化县| 海林市| 黔西县| 沁源县| 海丰县| 黎川县| 浏阳市| 井研县| 奉贤区| 宜春市| 渭南市| 赤水市| 长顺县| 富顺县| 眉山市| 英山县| 正定县| 太白县| 长葛市| 额尔古纳市| 旺苍县|