相信您已經(jīng)熟悉顏色的 RGB 和 HEX 表示，因?yàn)檫@是大多數(shù)文章/教程在編寫 CSS 顏色時(shí)使用的，但這些并不是在 CSS 中編寫顏色的最佳方法。HEX 和 RGB 很難理解，使顏色變淺/變深或?qū)㈩伾珡募t色轉(zhuǎn)換為橙色并不容易。這就是 HSL 的用武之地。HSL 是一種更容易閱讀的格式，它使更改顏色的亮度或色調(diào)等操作變得簡(jiǎn)單。

什么是 HSL？

HSL 代表色相、飽和度和亮度。這類似于 RGB 如何通過將其紅色、綠色和藍(lán)色值組合在一起來表示顏色，但使用 HSL，這些值更直觀。

色調(diào)

顏色的色調(diào)由圍繞一個(gè)圓圈的度數(shù)表示。試想一個(gè)色輪，0 度代表紅色，180 度代表青色，360 度代表同樣的紅色。

飽和

飽和度由 0 到 100 之間的百分比表示，并確定顏色的灰色程度。如果顏色是 100% 飽和度，則根本沒有灰色，而飽和度為 0% 的顏色將是沒有顏色的灰色陰影。

亮度

亮度也用百分比表示，并確定顏色的白色或黑色。如果顏色是 50% 的亮度，那么這意味著沒有額外的白色或黑色添加到顏色中。隨著百分比增加到 50% 以上，它會(huì)在顏色中添加更多的白色，直到在 100% 亮度下達(dá)到完全白色。隨著百分比降低到 50% 以下，它會(huì)為顏色添加更多黑色，直到在 0% 亮度下達(dá)到完全黑色

如何使用 HSL？

現(xiàn)在我們了解了 HSL 是什么，我們可以談?wù)勅绾问褂盟Ｋ墓ぷ髟砼c RGB 一樣，您可以在 CSS 中調(diào)用該hsl函數(shù)來定義 HSL 顏色。

.class {
  /* Pure red #FF0000 */
  background-color: hsl(0, 100%, 50%);
}

傳遞給 hsl 的第一個(gè)值是色調(diào)，它是 0 到 360 之間的度數(shù)，第二個(gè)值是飽和度，它是 0% 到 100% 之間的百分比值，最后傳遞的最終值是亮度，它是一個(gè)百分比值在 0% 和 100% 之間。您還可以使用hsla來表示部分透明的顏色。這個(gè)函數(shù)接受第四個(gè)參數(shù)，它是一個(gè)介于 0 和 1 之間的值，其中 1 是完全不透明的，而 0 是完全透明的。

為什么這很重要？

像這樣寫顏色可能看起來有點(diǎn)奇怪，因?yàn)槟愫芸赡芰?xí)慣于 HEX 或 RGB，但是一旦你習(xí)慣了它，它會(huì)讓寫 CSS 變得更加愉快。以下是幾個(gè)原因：

輕松更改亮度/飽和度

正如我在本文開頭提到的，您經(jīng)常需要在 CSS 中更改顏色的亮度或飽和度，以執(zhí)行諸如為按鈕引入懸停狀態(tài)之類的操作。使用 HEX 可能會(huì)很痛苦，因?yàn)闆]有人知道暗 10% 的版本#FA652F是什么，但是暗 10% 的版本hsl(16, 95%, 58%)很容易計(jì)算。您只需將亮度值降低 10% 即可hsl(16, 95%, 48%)。

您甚至可以更進(jìn)一步，使用calcCSS 中的自定義屬性為您自動(dòng)執(zhí)行此操作。

.btn {
  --background-hue: 200;
  background-color: hsl(
    var(--background-hue),
    100%,
    calc(50% + var(--lightness-offset))
  );
}
.btn:hover {
  --lightness-offset: -10%;
}
.btn:focus {
  --lightness-offset: -20%;
}
.btn-danger {
  --background-hue: 0;
}

使用這少量代碼，我們?cè)O(shè)置了一個(gè)基本的 btn 類，它總是使背景在懸停時(shí)變暗 10%，在焦點(diǎn)上變暗 20%。我們也這樣做了，以便我們可以更改其他類型按鈕的按鈕色調(diào)，我們甚至不需要修改這些新按鈕類型的懸停和焦點(diǎn)狀態(tài)，因?yàn)樗鼈兌际鞘褂米远x屬性和calc.

輕松獲取相關(guān)顏色

如果您熟悉任何顏色理論，那么您就會(huì)知道理解互補(bǔ)色、原色/次色、相似色等很重要。使用 RGB 或 HEX 很難找出這些不同類型的顏色，但使用 HSL 很容易找到諸如互補(bǔ)色之類的東西。這是因?yàn)榛パa(bǔ)色只是色輪另一側(cè)的顏色，在 HSL 的情況下，這意味著它們的色調(diào)彼此相差 180 度。

這很重要，因?yàn)槟梢允褂眠@些知識(shí)在 CSS 中創(chuàng)建一個(gè)顏色主題，該主題使用數(shù)學(xué)來計(jì)算這些互補(bǔ)色，并允許您一次輕松地更改整個(gè)站點(diǎn)的顏色主題。下面是我建立的一個(gè)可以做到這一點(diǎn)的網(wǎng)站的例子。

輕松更改色調(diào)

最后，HSL 的最后一個(gè)重大勝利是它可以輕松更改顏色的色調(diào)。如果你想讓你的紅色更橙色一點(diǎn)，你可以通過讓你的色調(diào)更大一點(diǎn)來做到這一點(diǎn)，因?yàn)槌壬谏喩系募t色之后。這真的很有用，因?yàn)樵谠O(shè)計(jì)和開發(fā)的早期階段，像這樣的小顏色變化非常普遍，并且能夠輕松地制作它們可以節(jié)省大量時(shí)間。

結(jié)論

HSL 是一種在 CSS 中表示顏色的不同方式，它不僅更易于閱讀，而且更易于在 CSS 中修改和使用。在我看來，它是 CSS 中最好的顏色格式。

文由公眾號(hào) “把科學(xué)帶回家” 提供

給孩子最好的科學(xué)教育

本文轉(zhuǎn)載自公眾號(hào)“環(huán)球科學(xué)ScientificAmerican”（ID：huanqiukexue）

撰文 怡若樂

編輯 丁家琦

小學(xué)美術(shù)課告訴我們?nèi)羌t黃藍(lán)，初中物理課又告訴我們光的三原色是紅綠藍(lán)，為什么偏偏都是三種？這兩套三原色為什么又不一樣？它們之間有關(guān)系嗎？今天我們就來解答一下這個(gè)問題。

光學(xué)三原色：色光加色混合法

顏料三原色：顏料減色混合法

我們看到的“顏色”，到底是什么？

顏色就是不同波長(zhǎng)的可見光投射到我們的視網(wǎng)膜里，被視網(wǎng)膜感知后在大腦里產(chǎn)生不同的反應(yīng)。為了區(qū)分不同的色光，視網(wǎng)膜背后的感光細(xì)胞肯定不能只有一種，不然我們看到的世界就只有一種深淺不同的顏色了，就像黑白照片一樣。

實(shí)際上，我們?nèi)搜塾糜趨^(qū)分色光的細(xì)胞（即視錐細(xì)胞）有三種，每種只對(duì)特定波長(zhǎng)范圍的光敏感：

第一種對(duì)長(zhǎng)波長(zhǎng)可見光敏感，叫做L（long）視錐細(xì)胞；

第二種對(duì)中波長(zhǎng)可見光敏感，叫做M（medium）視錐細(xì)胞；

第三種對(duì)短波長(zhǎng)可見光敏感，叫做S（short）視錐細(xì)胞。

三種視錐細(xì)胞對(duì)光譜中不同波長(zhǎng)光的響應(yīng)見下圖，幾乎能覆蓋可見光領(lǐng)域。

這樣，眼睛在接收任一波長(zhǎng)的可見光時(shí)，都能不同程度地激活一種到兩種，甚至三種視錐細(xì)胞，它們產(chǎn)生的信號(hào)疊加起來，形成了我們感受到的顏色。

但這樣一來，聰明的讀者可能就注意到了一個(gè)問題：波長(zhǎng)為580nm的黃光會(huì)同時(shí)激發(fā)代表綠色的M視錐細(xì)胞和代表紅色的L視錐細(xì)胞，那它看起來和綠光與紅光兩種單色光的某種疊加有何區(qū)別呢？

答案是，沒區(qū)別——在人眼看來。這就是為什么在人眼看來綠光+紅光=黃光，藍(lán)光+綠光=淺藍(lán)光，三原色與色光疊加原理都是我們?nèi)搜鄣倪@三種視錐細(xì)胞帶來的。

早在上世紀(jì)初，亥姆霍茲等人在還不知道視錐細(xì)胞存在的情況下就提出了視覺的三原色學(xué)說，設(shè)想在視網(wǎng)膜中存在著分別對(duì)紅、綠、藍(lán)的光線特別敏感的三種細(xì)胞或相應(yīng)的三種感光色素，當(dāng)光線作用于視網(wǎng)膜時(shí)，可以不同程度地刺激相應(yīng)的細(xì)胞或感光色素，在中樞引起介于此二原色之間的色覺。

這種假說得到實(shí)驗(yàn)證實(shí)之后，反過來又被科學(xué)家用來開發(fā)電子顯示屏——我們從電視、電腦、手機(jī)屏幕上看到的彩色圖像，就是紅綠藍(lán)三原色色光經(jīng)不同程度疊加產(chǎn)生的，所以一旦你湊近了仔細(xì)看彩色電子屏幕，就能看到紅綠藍(lán)顏色的顆粒（在老式的電視機(jī)上更容易看到，如果對(duì)著蘋果的Retina屏找，你可能就要瞎了……）。

顯示器采用色光加色混合法三原色：紅綠藍(lán)

那為什么顏料的三原色與光不同呢？

這是因?yàn)轭伭系寞B加原理與色光的疊加原理不同。

顏料之所以呈現(xiàn)出特定的顏色，不是因?yàn)樗旧戆l(fā)出了該顏色的光，而是它吸收了其他色光，而顏料的疊加，也就是吸收的疊加。

舉個(gè)栗子：黃色顏料反射了紅光和綠光（紅光與綠光的疊加在我們眼里就是黃光），而我們?nèi)粘Ｋ玫乃{(lán)色顏料反射藍(lán)光和綠光。把它們配在一起的時(shí)候，黃色顏料吸收了藍(lán)色顏料所反射的藍(lán)光，而藍(lán)色顏料吸收了黃色顏料反射的紅光，所以就只剩下了綠色光。一旦再疊加其他多種顏料，把所有的色光吸收殆盡，在我們眼前的就是一團(tuán)漆黑了。

那會(huì)不會(huì)有少數(shù)人有兩種或者四種視錐細(xì)胞？其他動(dòng)物呢？

大多數(shù)人類擁有三種視錐細(xì)胞，但并不是每個(gè)人都能感受到三原色下的世界，有些患者其中一種或兩種視錐細(xì)胞會(huì)出現(xiàn)缺陷，這就會(huì)導(dǎo)致色覺缺陷，稱為色盲。色盲（color blindness）最先由英國(guó)化學(xué)家約翰·道爾頓詳細(xì)描述，因而也叫道爾頓癥（daltonism）。

色盲主要分紅綠色盲、藍(lán)黃色盲和全色盲。紅綠色盲是最常見的色盲，患者無法分辨紅色和綠色（看起來接近灰色或就是灰色），藍(lán)黃色盲則無法分辨藍(lán)色和黃色，全色盲最為稀少，患者只能看到像黑白照片一樣不同灰度的世界。

色盲眼中的世界是什么樣？下面這張圖可能會(huì)給我們一個(gè)直觀的印象。

@Johannes Ahlmann/Wiki Commons

左上是正常色覺的人看到的的彩色風(fēng)車，右上和右下是紅綠色盲患者看到的景象（嚴(yán)格來說紅色盲和綠色盲并不一樣，但癥狀是類似的），左下是藍(lán)黃色盲看到的景象。

可以看到，紅綠色盲的眼里沒有紅色和綠色，他們看到的“紅色”和“綠色”只是偏藍(lán)或偏黃的灰色。

不過，“正常視力”與“色盲”之間并不存在一個(gè)一刀切的分界線，辨色能力是個(gè)連續(xù)譜。

很多色盲患者都不是缺失了一種或多種視錐細(xì)胞，而是兩種視錐細(xì)胞的敏感范圍過于接近，從而減小了對(duì)三種顏色辨別的范圍。這種情況比三種單色色盲更常見，并且會(huì)使顏色視覺具有更多變化的結(jié)果。

此外，界定一個(gè)人是否色盲也應(yīng)取決于他/她的環(huán)境和職業(yè)需求：視覺設(shè)計(jì)師和珠寶鑒定師需要對(duì)顏色有敏銳的鑒定能力，但對(duì)記者而言要求就沒有那么高了。

那怎么知道你是不是色盲呢？最常見的測(cè)試方法莫過于石原氏色盲測(cè)驗(yàn)了。也許我們體檢的時(shí)候都有測(cè)過這一項(xiàng)，醫(yī)生給你拿出一張這樣色彩斑斕的圖片，色覺正常的人和色盲患者看到的圖案會(huì)不同。如下圖，色覺正常的人看到的數(shù)字是74，而色盲患者看到的就是21。

有超過三種顏色視覺是怎樣的體驗(yàn)？

既然擁有三種視錐細(xì)胞的“正常人”能比色盲患者看到更多的顏色，那會(huì)不會(huì)存在擁有四種甚至以上色覺的人？澳大利亞藝術(shù)家孔切塔·安蒂科（Concetta Antico）就是這樣一位“四色視者”。

@ConcettaAntico.com

經(jīng)研究人員測(cè)定，她的第四種視錐細(xì)胞的敏感波段大約在紅色與橙色之間，她看到的顏色據(jù)說能比普通人多百倍。她的藝術(shù)創(chuàng)作，正是為了將自己看到的斑斕的世界傳達(dá)給我們普通的三色視者。

安蒂科筆下的樹與（三色視覺者眼中）真實(shí)場(chǎng)景對(duì)比。

@Concetta Antico

那么其他動(dòng)物呢？

對(duì)于大多數(shù)動(dòng)物，豐富的色覺都非常有利于適應(yīng)多變環(huán)境。現(xiàn)存的脊椎動(dòng)物中，爬行動(dòng)物、鳥類和真骨下綱的魚類都具有四種視錐細(xì)胞，它們能看到波長(zhǎng)更短的紫外線。

通過研究這些動(dòng)物調(diào)控視蛋白合成的基因，我們得知這三群動(dòng)物的共同祖先，也就是3.6億年前的硬骨魚類就具有了四色視覺。

這種金光菊能反射出紫外光，因此，鳥類能看到花心以外一個(gè)更大的黑色圓圈。圖片由美國(guó)羅切斯特理工學(xué)院教授安德魯·大衛(wèi)德哈齊（Andrew Davidhazy）用檢測(cè)紫外線的照相機(jī)拍攝。

@《環(huán)球科學(xué)》

也許用動(dòng)物的眼光來看待這個(gè)世界，就可以理解它們行為的關(guān)鍵。一些動(dòng)物可以看見更加五彩斑斕的世界，而另一些動(dòng)物眼里的世界就相對(duì)平淡很多。

這些都是為了相互溝通，吸引異性和躲避捕食。研究那些我們所能看到的和看不到的顏色，不管對(duì)人類的自我認(rèn)知和發(fā)展，還是對(duì)動(dòng)物行為的了解以及規(guī)律的總結(jié)，都具有重要意義。

不過癮，請(qǐng)戳

把科學(xué)帶回家

ID：steamforkids

給孩子最好的科學(xué)教育

轉(zhuǎn)載請(qǐng)聯(lián)系 kids@huanqiukexue.com

長(zhǎng)按二維碼關(guān)注我們

參考鏈接：

en.wikipedia.org/wiki/Color

en.wikipedia.org/wiki/Cone_cell

en.wikipedia.org/wiki/Color_blindness

www.bbc.com/future/story/20140905-the-women-with-super-human-vision

www.bio1000.com/qw/tupian/417042.html

www.handprint.com/HP/WCL/color1.html#receptors

reamweaver的CSS面板分類

type(類型)

background(背景)

block(區(qū)塊)

box(方框) 或盒子意思

border(邊框)

list(列表)

positioning(定位)

extensions(擴(kuò)展)

共八個(gè)部分

1. type(類型)

type面板主要是對(duì)文字的字體，大小，顏色，效果等基本樣式進(jìn)行設(shè)置。

注意：屬性名帶*號(hào)的是指樣式效果不能在編輯文檔時(shí)顯示，要用瀏覽器打開才能看到效果。

(1)font-family：設(shè)置字體系列。什么叫字體系列呢?是指對(duì)文字設(shè)定幾個(gè)字體，當(dāng)遇到第一個(gè)字體不能顯示的文字時(shí)會(huì)自動(dòng)用系列中的第二個(gè)

字體或后面的字體顯示。

注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個(gè)系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，

也可以直接手動(dòng)在下拉框里寫字體名，字體之間用逗號(hào)隔開。中文網(wǎng)頁默認(rèn)字體是宋體, 一般就空著不要選取任何字體。

默認(rèn)值： not specified(取決于瀏覽器,系統(tǒng)默認(rèn)的字體, 如: 微軟雅黑)

注意：

1.如果有漢字, 那么我們要加引號(hào)

2.如果有多個(gè)英文字母組成的單詞, 我們也要加引號(hào); "microsoft yahei" 中間用空格隔開

3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...

為了避免在CSS中使用 font 或 font-family 設(shè)置中文字體時(shí)亂碼, 可以使用 Unicode 編碼來表示字體。

/* 示例:使用Unicode字體編碼設(shè)置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定義文字的大小。你可以通過選取數(shù)字和度量單位來選擇具體的字體大小，或者你也可以選擇一個(gè)相對(duì)的字體大小。

最好使用pixels作為單位，這樣不會(huì)在瀏覽器中文本變形。一般字體用比較標(biāo)準(zhǔn)的12px或14px, 默認(rèn)值為16px。

注意：CSS中長(zhǎng)度的單位分絕對(duì)長(zhǎng)度單位和相對(duì)長(zhǎng)度單位:

絕對(duì)長(zhǎng)度單位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根據(jù)顯示的實(shí)際尺寸來確定長(zhǎng)度。

此類單位不隨顯示器的分辨率改變而改變。

相對(duì)長(zhǎng)度單位有：

px：(像素)根據(jù)顯示器的分辨率來確定長(zhǎng)度。

em：當(dāng)前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。

比如自身font-size: 30px; 那么此時(shí)1em=30px;

ex：當(dāng)前字母"x"的高度，一般為字體尺寸的一半。

%：是以當(dāng)前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。

small、large：表示比當(dāng)前小一個(gè)級(jí)別或大一個(gè)級(jí)別的尺寸。

默認(rèn)值：medium(標(biāo)準(zhǔn)大小)

(3)font-style：定義字體樣式為normal、italic、oblique。默認(rèn)設(shè)置為normal。

注意： italic 斜體 oblique 歪斜體 italic和oblique實(shí)際效果是一樣的。

默認(rèn)值:normal

(4)line-height：設(shè)置文本所在行的行高。默認(rèn)為normal。可以是行內(nèi)元素、行內(nèi)塊元素, 通常與height設(shè)置的高度值相同, 可以做到垂直居中的作用。

你也可以自己鍵入一個(gè)精確的數(shù)值并選取一個(gè)計(jì)量單位。

比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行間距,相對(duì)數(shù)值,1.5倍行距,*/ 可有效的避免文字發(fā)生重疊

默認(rèn)值： normal

(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。

這些效果可以同時(shí)存在，將效果前的復(fù)選框選定即可。

注意：鏈接的默認(rèn)設(shè)置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持

默認(rèn)值： none

(6)font-weight：給字體指定粗體字的磅值。

normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。

bold 定義粗體字符。

bolder 定義更粗的字符。

lighter 定義更細(xì)的字符。

100

200

300

400

500

600

700

800

900

inherit 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。

定義由粗到細(xì)的字符。400 等同于 normal, 而 700 等同于 bold。

默認(rèn)值: normal

(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時(shí), 此樣式區(qū)域內(nèi)所有字母大寫。

normal表示正常的字體, 為默認(rèn)值；

默認(rèn)值: normal

(8)text-transform：將選區(qū)中每個(gè)單詞的第一個(gè)字母轉(zhuǎn)為大寫, 或者令單詞全部大寫或全部小寫。

參數(shù)：capitalize(單詞首字母大寫)、uppercase(轉(zhuǎn)換成大寫)、lowercase(轉(zhuǎn)換成小寫)、none(不轉(zhuǎn)換)。

默認(rèn)值：none

(9)color：定義文字顏色。包括對(duì)表單輸入的文字顏色。

CSS中顏色的值有三種表示方法：

#RRGGBB格式，是由紅綠藍(lán)三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進(jìn)制正整數(shù)。

例如：#FF0000表示紅色，#FFFF00表示黃色。

rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。

用顏色名稱。CSS可以使用已經(jīng)定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。

顏色值的縮寫:

p{color:#000000} 可以縮寫為：p{color:#000}

p{color:#336699} 可以縮寫為：p{color:#369}

默認(rèn)值： not specified

color: transparent; 透明色

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1)

注意: 如果文字的顏色通過單獨(dú)的類選擇去設(shè)置沒有改變顏色, 則應(yīng)該通過組合選擇器(.header .top .topR .blue)去設(shè)置, 改變它的優(yōu)先級(jí)。

2. background(背景)

background面板主要是對(duì)元素的背景進(jìn)行設(shè)置，包括背景顏色、背景圖象、背景圖象的控制。

一般是對(duì)body(頁面)、table(表格)、div(區(qū)域)的設(shè)置。

(1)background-color：設(shè)置元素的背景色。包括對(duì)input表單輸入框的背景顏色;

默認(rèn)值: transparent(背景顏色為透明)

rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1) 一般用于背景色

(2)background-image：設(shè)置元素的背景圖像。

默認(rèn)值:none

CSS3支持多重背景圖,只要加上一個(gè)url指定圖片路徑,并用逗號(hào)(,)將兩組url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：確定背景圖像是否以及如何重復(fù)。

repeat 默認(rèn)值。背景圖像將在垂直方向和水平方向重復(fù)。

repeat-x 背景圖像將在水平方向重復(fù)。

repeat-y 背景圖像將在垂直方向重復(fù)。

no-repeat 背景圖像將僅顯示一次。

inherit 規(guī)定應(yīng)該從父元素繼承background-repeat屬性的設(shè)置。

注意：如果定義的元素的body，可以控制頁面背景是否重復(fù)。

默認(rèn)值: repeat

(4)background-attachment：固定背景圖像或者跟隨內(nèi)容滾動(dòng)。

參數(shù)fixed表示固定背景(不隨屏幕滾動(dòng)而滾動(dòng)，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內(nèi)容滾動(dòng)的背景。

注意：如果定義的元素的body, 可以使頁面背景固定。

默認(rèn)值: scroll

(5)background-position(X)：指定背景圖像的水平位置。

可以指定為left(左邊), center(居中)，right(右邊)；

也可以指定數(shù)值，如20px是指背景距離左邊20象素。

background-position(Y)：指定背景圖像的垂直位置。

可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數(shù)值。

background-position屬性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您僅規(guī)定了一個(gè)關(guān)鍵詞，那么第二個(gè)值將是"center"。

注意:采用英文單詞的水平位置和垂直位置的屬性值可以調(diào)換

x% y% 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是 50%。

xpos ypos 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是50%。

您可以混合使用 % 和 position 值。

默認(rèn)值：0% 0%