【CSS】：顔色、背景

目錄
1. 顔色（Color）
   1.1. 具名顔色
   1.2. RGB
   1.3. HSL
2. 背景（Background）
   2.1. 背景色（background-color）
   2.2. 背景裁剪（background-clip）
   2.3. 背景圖（background-image）
   2.4. 背景定位（background-position）
   2.5. 背景定位（background-origin）
   2.6. 背景重複方式（background-repeat）
   2.7. 背景圖尺寸（background-size）
   2.8. 背景粘附（background-attachment）
   2.9. 寫為一個屬性（background）
3. 幾道筆試題

複制

1. 顔色（Color）

CSS 資料類型 <color> 表示一種标準RGB色彩空間（sRGB color space）的顔色。一種顔色可以用以下任意的方式來描述：

使用一個關鍵字（具名顔色）
使用 RGB 立體坐标系統（例如：#000 或 rgb(255,0,51) 或 rgba(255,0,0,0.1)）
使用 HSL 圓柱坐标系統（例如：hsl(270,100%,50%) 或 hsla(240,100%,50%,0.05)）

1.1. 具名顔色

如果隻想使用基本的顔色，最簡單的方法是使用顔色的名稱。CSS 把這種顔色稱為具名顔色（named color）。

常用的（能記住、能拼寫出來的）有：black、white、yellow、red、green、grey、purple、orange。

示例：

div {
  background-color: red;
}

複制

1.2. RGB

1.2.1. CSS 規範

顔色可以使用紅-綠-藍（red-green-blue (RGB)）模式的兩種方式被定義：

十六進制符号 #RRGGBB 和 #RGB
- 三位數的 RGB 符号（#RGB）和六位數的形式（#RRGGBB）是相等的。
函數符 rgb(R,G,B)

例如：

div {
  background-color: #f00;
}

複制

1.2.2. RGB基本原理

RGB是從顔色發光的原理來設計定的，通俗點說它的顔色混合方式就好像有紅、綠、藍三盞燈，當它們的光互相疊合的時候，色彩相混，而亮度卻等于三者亮度之總和，越混合亮度越高，即加法混合。
紅、綠、藍三個顔色通道每種色各分為256階亮度，在0時“燈”最弱——是關掉的，而在255時“燈”最亮。當三色灰階數值相同時，産生不同灰階值的灰色調，即三色灰階都為0時，是最暗的黑色調；三色灰階都為255時，是最亮的白色調。
RGB 顔色稱為加成色，因為您通過将 R、G 和 B 添加在一起（即所有光線反射回眼睛）可産生白色。加成色用于照明光、電視和計算機顯示器。

圖1-1：光學三原色（RGB）

圖1-2：RGB顔色表

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div {
      width: 100px;
      height: 100px;
      margin: 10px;
      float: left;
    }

    div:nth-of-type(1){
      background-color: #ff0000;
    }
    div:nth-of-type(2){
      background-color: #00ff00;
    }
    div:nth-of-type(3){
      background-color: #0000ff;
    }

    div:nth-of-type(4){
      background-color: #ffff00;
    }  
    div:nth-of-type(5){
      background-color: #ff00ff;
    }  
    div:nth-of-type(6){
      background-color: #00ffff;
    }    
</style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <p style="clear:both;"></p>
  <div></div>
  <div></div>
  <div></div>  
</body>
</html>

複制

1.3. HSL

顔色也可以使用 hsl() 函數符被定義為色相-飽和度-明度（Hue-saturation-lightness）模式。

1.3.1. HSL 基本原理

HSL是一種将RGB色彩模型中的點在圓柱坐标系中的表示法。HSL即色相(Hue)、飽和度( Saturation)、亮度( Lightness)。

圖1-3：HSL 色相環

圖1-4：HSL 色相、飽和度、明度

示例：

就說到這

個人覺着顔色這東西吧.....

大體了解即可

2. 背景（Background）

2.1. 背景色（background-color）

CSS屬性中的 background-color 會設定元素的背景色。

文法：

關鍵點：

不是繼承屬性；
屬性預設值為 transparent；

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div {
      padding: 1em;
    }

    div {
      border: 10px dotted;
    }
    .exampleone {
      background-color: teal;
      color: white;
    }

    .exampletwo {
      background-color: rgb(153,102,153);
      color: rgb(255,255,204);
    }

    .examplethree {
      background-color: #777799;
      color: #FFFFFF;
    }
</style>
</head>
<body>
  <div class="exampleone">
   Lorem ipsum dolor sit amet, consectetuer
  </div>

  <div class="exampletwo">
    Lorem ipsum dolor sit amet, consectetuer
  </div>

  <div class="examplethree">
    Lorem ipsum dolor sit amet, consectetuer
  </div>
</body>
</html>

複制

2.2. 背景裁剪（background-clip）

background-clip 屬性控制背景能夠延伸到何處。

background-clip 隻是将背景和背景色粗暴的裁剪。

（The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.）

文法：

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    p {
      border: .8em darkviolet;
      border-style: dotted double;
      margin: 1em 0;
      padding: 1.4em;
      background: linear-gradient(60deg, red, yellow, red, yellow, red);
      font: 900 1.2em sans-serif;
      text-decoration: underline;
    }

    .border-box { background-clip: border-box; }
    .padding-box { background-clip: padding-box; }
    .content-box { background-clip: content-box; }

    .text {
      background-clip: text;
      -webkit-background-clip: text;
      color: rgba(0,0,0,.2);
    }
</style>
</head>
<body>
  <p class="border-box">The background extends behind the border.</p>
  <p class="padding-box">The background extends to the inside edge of the border.</p>
  <p class="content-box">The background extends only to the edge of the content box.</p>
  <p class="text">The background is clipped to the foreground text.</p>
</body>
</html>

複制

2.3. 背景圖（background-image）

CSS background-image 屬性用于為一個元素設定一個或者多個背景圖像。

常用文法：

background-image: url("./media/examples/lizard.png");

複制

關鍵點：

在繪制時，圖像以 z 方向堆疊的方式進行。先指定的圖像會在之後指定的圖像上面繪制。是以指定的第一個圖像“最接近使用者”。然後元素的邊框 border 會在它們之上被繪制，而 background-color 會在它們之下繪制。
如果一個指定的圖像無法被繪制 (比如，被指定的 URI 所表示的檔案無法被加載)，浏覽器會将此情況等同于其值被設為 none。（是以，建議，即使圖像是不透明的，背景色在通常情況下并不會被顯示，web開發者仍然應該指定 background-color 屬性。如果圖像無法被加載—例如，在網絡連接配接斷開的情況下—背景色就會被繪制。）

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    p {
      font-size: 1.5em;
      color: #FE7F88;
      background-image: none;
      background-color: transparent;
    }

    div {
      background-image:
        url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
    }

    .catsandstars {
      background-image:
        url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), 
        url("https://mdn.mozillademos.org/files/7693/catfront.png");
      background-color: transparent;
    }
</style>
</head>
<body>
  <div>
    <p class="catsandstars">
    This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p class="catsandstars">
    Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
  </div>
</body>
</html>

複制

2.4. 背景定位（background-position）

background-position 為每一個背景圖檔設定初始位置。這個位置是相對于由 background-origin 定義的位置圖層的。

2.4.1. 文法（仔細品一品）：

關鍵字（left、right、top、bottom、center）
- 位置關鍵字的順序随意，隻要不超過兩個：一個指定橫向位置，一個指定縱向位置。
- 如果使用了兩個橫向位置關鍵字（例如：right right）或兩個縱向關鍵字（例如：top top），整個值将被忽略。
- 如果隻有一個關鍵字，另一個假定為 center；

百分比
- 百分比值的偏移指定圖檔的相對位置和容器的相對位置重合。
- 值0%代表圖檔的左邊界（或上邊界）和容器的左邊界（上邊界）重合。值100%代表圖檔的右邊界（或下邊界）和容器的右邊界（或下邊界）重合。值50%則代表圖檔的中點和容器的中點重合。
【CSS】：顔色、背景
- 注意，如果背景圖檔的大小和容器一樣，那設定百分比的值将永遠無效，因為“容器和圖檔的差”為0（圖檔永遠填滿容器，并且圖檔的相對位置和容器的相對位置永遠重合）。
- 注意：第一個百分數值始終是橫向偏移。
- 注意：如果隻提供一個百分數值，那個值将作為橫向偏移，而縱向偏移假定為 50%。

長度值
- 長度值是相對于元素背景左上角的偏移。
- 注意，關鍵字以外的值對軸的順序有要求。也就是說，如果使用長度值或百分數值，橫向值必須寫在首位，縱向值必須寫在末位。

相對于指定邊偏移
- 句法是：一個邊界關鍵字、一個偏移距離，一個邊界關鍵字和一個偏移距離（例如：background-position: right 30% bottom 30px;）。橫向和縱向的順序随意，但是不能省略任何一個邊界關鍵字。
- 隻能把元素的邊界作為偏移基準，中線不行。例如：center 25% center 25% 将被忽略。

2.4.2. 綜合示例：

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

複制

2.5. 背景定位（background-origin）

background-origin 屬性确定計算源圖像的位置時以什麼的邊界為基準，定義的是背景定位區域。

注意：background-clip 定義的是對背景的切割。

The background-origin CSS property sets the background's origin: from the border start, inside the border, or inside the padding.

文法：

示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    div{
      width: 150px;
      height: 150px;
      padding: 50px;
      margin: 10px;
      border: 10px dashed #000000;
      float: left;
    }

    div {
      background-color: #ffff00;
      background-image: url(pic.jpg);
      background-repeat: no-repeat;
      background-size: 100px 100px;
    }

    /* backgound-clip */
    div:nth-of-type(1){
      background-clip: border-box; /* default */
    }
    div:nth-of-type(2){
      background-clip: padding-box;
    }
    div:nth-of-type(3){
      background-clip: content-box;
    }

    /* backgound-origin */
    div:nth-of-type(4){
      background-origin: border-box;
    }
    div:nth-of-type(5){
      background-origin: padding-box; /* default */
    }
    div:nth-of-type(6){
      background-origin: content-box;
    }
</style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>

  <p style="clear:both;"></p>

  <div></div>
  <div></div>
  <div></div>
</body>
</html>

複制

2.6. 背景重複方式（background-repeat）

CSS 屬性 background-repeat 定義背景圖像的重複方式。背景圖像可以沿着水準軸，垂直軸，兩個軸重複，或者根本不重複。

background-repeat 屬性隻有四個值：repeat、no-repeat、space、round
如果提供兩個值，第一個值應用于橫向，第二個值應用于縱向。
如果隻有一個值，同時應用于橫向和縱向。

文法：

/* 單值文法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 雙值文法: 水準horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

複制

示例：

2.7. 背景圖尺寸（background-size）

background-size 設定背景圖檔大小。圖檔可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。

contain、cover
- 如果你想讓圖像完全覆寫元素的背景，而且不在乎有部分圖像超出背景繪制區域。此時，可以使用 cover。
- contain 會将圖像縮放為正好放在背景定位區域中的尺寸，允許有部分區域不被圖像覆寫。
- 注意，cover 和 contain 限定尺寸的圖像，其尺寸始終相對背景定位區域計算，即 background-origin 定義的區域。

2.8. 背景粘附（background-attachment）

background-attachment CSS 屬性決定背景圖像的位置是在視口内固定，還是随着包含它的區塊滾動。

2.9. 寫為一個屬性（background）

background 屬性是一個簡寫屬性，可以在一次聲明中定義一個或多個屬性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size 和 background-attachment。

background-size 值必須緊随 background-position 值後面，而且二者之間要以一條斜線（/）隔開。
如果同時為 background-origin 和 background-clip 提供值，前一個配置設定給 background-origin，後一個配置設定給 background-clip。
background 不要求必須設定任何值，隻要有一個值，其他都可以省略。

示例：

background: green;
background: url("test.jpg") repeat-y;
background: no-repeat url("../../media/examples/lizard.png");
background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png");
background: border-box red;

複制

3. 幾道筆試題

題目01：

題目02：

題目03：

題目04：

題目05：

題目06：

題目07：

題目08：

參考：

《CSS 世界》

《CSS核心技術詳解》

《CSS權威指南第四版上冊》

color：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value

mdn, background：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-color

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment

【CSS3】background-origin 和 background-clip的差別：

https://www.cnblogs.com/shytong/p/5077129.html