背景和邊框

CSS 的background 屬性是許多背景詳細屬性的簡寫形式，我們將在本課中學習這些屬性。如果您在樣式表中發現了一個複雜的背景屬性，它可能看起來有點難以理解，因為可以同時傳遞很多值。

.box {
  background:
    linear-gradient(
        105deg,
        rgb(255 255 255 / 20%) 39%,
        rgb(51 56 57 / 100%) 96%
      )
      center center / 400px 200px no-repeat,
    url(big-star.png) center no-repeat,
    rebeccapurple;
}

我們將在本教程後面再討論簡寫形式的工作原理，但首先讓我們透過檢視各個背景屬性來了解 CSS 中可以使用背景執行的不同操作。

The background-color 屬性定義了 CSS 中任何元素的背景顏色。該屬性接受任何有效的<color>。background-color 擴充套件到元素的內容和內邊距框下方。

在下面的示例中，我們使用了各種顏色值來為盒子、標題和<span> 元素新增背景顏色。

使用任何可用的<color> 值來嘗試這些顏色。

The background-image 屬性可在元素的背景中顯示影像。在下面的示例中，我們有兩個盒子——一個盒子的背景影像大於盒子本身(balloons.jpg)。另一個盒子有一個小星星的影像(star.png)。

此示例演示了有關背景影像的兩個方面。預設情況下，大影像不會縮放到適合盒子的大小，因此我們只能看到它的一小部分，而小影像則平鋪以填充盒子。

如果您除了背景影像之外還指定了背景顏色，則影像會顯示在顏色的頂部。嘗試向上面的示例新增 background-color 屬性以檢視其效果。

控制 background-repeat

The background-repeat 屬性用於控制影像的平鋪行為。可用的值有

• no-repeat — 完全停止背景重複。
• repeat-x — 水平重複。
• repeat-y — 垂直重複。
• repeat — 預設值；在兩個方向上重複。
• space — 儘可能多地重複，如果有多餘的空間可用，則在影像之間新增空格。
• round — 與 space 類似，但會拉伸影像以填充任何額外的空間

在下面的示例中嘗試這些值。我們已將值設定為 no-repeat，因此您只會看到一顆星星。嘗試不同的值（repeat-x 和 repeat-y）以檢視它們的效果。

調整背景影像大小

在初始背景影像示例中使用的 balloons.jpg 影像是一個大影像，由於它大於其作為背景的元素，因此被裁剪了。在這種情況下，我們可以使用 background-size 屬性，它可以採用 <length> 或 <percentage> 值，來調整影像大小以適合背景。

您也可以使用關鍵字

• cover — 瀏覽器會將影像放大到足以完全覆蓋盒子區域的大小，同時仍然保留其縱橫比。在這種情況下，影像的一部分可能會最終出現在盒子外面。
• contain — 瀏覽器會將影像調整到適合盒子內部的大小。在這種情況下，如果影像的縱橫比與盒子的縱橫比不同，您最終可能會在影像的左右兩側或頂部和底部出現間隙。

在下面的示例中，balloons.jpg 影像已設定長度單位以將其大小調整到盒子內部。您可以看到這扭曲了影像。

嘗試以下操作。

• 更改用於修改背景大小的長度單位。
• 刪除長度單位，然後檢視使用 background-size: cover 或 background-size: contain 時會發生什麼。
• 如果您的影像小於盒子，您可以更改 background-repeat 的值以重複影像。

定位背景影像

The background-position 屬性允許您選擇背景影像在其應用到的盒子上顯示的位置。這使用了一個座標系，其中盒子的左上角為 (0,0)，並且盒子沿水平 (x) 和垂直 (y) 軸定位。

最常用的 background-position 值採用兩個單獨的值——一個水平值後跟一個垂直值。

您可以使用諸如 top 和 right 之類的關鍵字（在background-position 頁面上查詢其他關鍵字）

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}

以及長度和百分比

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

您還可以將關鍵字值與長度或百分比混合使用，在這種情況下，第一個值必須引用水平位置或偏移量，第二個值引用垂直位置或偏移量。例如

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px top;
}

最後，您還可以使用 4 值語法來指示距盒子某些邊緣的距離——在這種情況下，長度單位是從其前面的值偏移的。因此，在下面的 CSS 中，我們將背景定位在距頂部 20px 和距右側 10px 的位置

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

使用下面的示例來嘗試這些值並將星星在盒子中移動。

漸變（用作背景時）就像影像一樣，也透過使用 background-image 屬性設定。

您可以在 MDN 頁面上閱讀有關不同型別的漸變以及可以使用它們執行的操作的更多資訊，該頁面介紹了<gradient> 資料型別。一種玩漸變的有趣方法是使用網路上眾多 CSS 漸變生成器之一，例如CSSGradient.io。您可以建立一個漸變並複製貼上生成它的原始碼。

在下面的示例中嘗試一些不同的漸變。在兩個盒子中，我們分別有一個拉伸到整個盒子的線性漸變和一個具有設定大小的徑向漸變，因此會重複。

也可以使用多個背景影像——您可以在單個屬性值中指定多個 background-image 值，並用逗號分隔每個值。

當您這樣做時，您最終可能會使背景影像彼此重疊。背景將分層，最後一個列出的背景影像位於堆疊的底部，每個前面的影像都堆疊在其程式碼中後面的影像之上。

其他 background-* 屬性也可以像 background-image 一樣具有逗號分隔的值。

background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;

不同屬性的每個值都將與其他屬性中相同位置的值匹配。例如，上面 image1 的 background-repeat 值將為 no-repeat。但是，當不同的屬性具有不同數量的值時會發生什麼情況？答案是較少數量的值將迴圈——在上面的示例中，有四個背景影像，但只有兩個 background-position 值。前兩個位置值將應用於前兩個影像，然後它們將再次迴圈——image3 將獲得第一個位置值，image4 將獲得第二個位置值。

讓我們玩玩。下面的示例包含兩個背景影像。為了演示堆疊順序，請嘗試切換列表中哪個背景影像位於第一位。或者使用其他屬性來更改位置、大小或重複值。

我們可用於背景的另一個選項是指定內容滾動時背景如何滾動。這由 background-attachment 屬性控制，該屬性可以採用以下值

• scroll：使元素的背景在頁面滾動時滾動。如果元素內容滾動，背景不會移動。實際上，背景固定在頁面上的相同位置，因此它會隨著頁面滾動而滾動。
• fixed：使元素的背景固定到視口中，以便在頁面或元素內容滾動時它不會滾動。它將始終保持在螢幕上的相同位置。
• local：將背景固定到其設定的元素上，因此當您滾動元素時，背景會隨之滾動。

The background-attachment 屬性僅在有內容可滾動時才會生效，因此我們建立了一個演示來演示三個值之間的區別——請檢視 background-attachment.html（還可以檢視原始碼）。

如本課開頭所述，您通常會看到使用 background 屬性指定的背景。此簡寫形式允許您一次設定所有不同的屬性。

如果使用多個背景，則需要為第一個背景指定所有屬性，然後在逗號後新增下一個背景。在下面的示例中，我們有一個具有大小和位置的漸變，然後是一個具有 no-repeat 和位置的影像背景，然後是一個顏色。

編寫背景影像簡寫值時需要遵循一些規則，例如

• background-color 只能在最後一個逗號後指定。
• background-size 的值只能包含在 background-position 之後，並用“/”字元分隔，如下所示：center/80%。

檢視 MDN 頁面以瞭解 background 的所有注意事項。

當在背景影像或顏色上放置文字時，您應該注意文字與背景之間有足夠的對比度，以便訪客能夠輕鬆閱讀。如果指定了影像，並且將在影像上放置文字，則還應指定一個background-color，以便在影像未載入時文字仍然可讀。

螢幕閱讀器無法解析背景影像；因此，它們應該純粹用於裝飾。任何重要的內容都應成為 HTML 頁面的一部分，而不是包含在背景中。

在學習盒子模型時，我們瞭解了邊框如何影響盒子的尺寸。在本課中，我們將瞭解如何創造性地使用邊框。通常，當我們使用 CSS 向元素新增邊框時，我們會使用一個簡寫屬性，在一行 CSS 中設定邊框的顏色、寬度和樣式。

我們可以使用border設定盒子四個邊的邊框。

.box {
  border: 1px solid black;
}

或者我們可以定位盒子的一個邊，例如

.box {
  border-top: 1px solid black;
}

各個屬性包括border-width、border-style和border-color簡寫屬性。

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

每個邊都有寬度、樣式和顏色的完整屬性。

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

您可以為邊框使用各種樣式。在下面的示例中，我們為盒子使用了兩種不同的邊框樣式，為標題使用了兩種不同的邊框樣式。您可以嘗試不同的邊框樣式、寬度和顏色，以瞭解邊框的工作原理。

透過使用border-radius屬性及其與盒子每個角相關的完整屬性來實現圓角。可以使用兩個長度或百分比作為值，第一個值定義水平半徑，第二個值定義垂直半徑。在很多情況下，您只會傳入一個值，該值將用於兩者。

例如，要使盒子的四個角都具有 10px 的半徑

.box {
  border-radius: 10px;
}

或者使右上角具有 1em 的水平半徑和 10% 的垂直半徑

.box {
  border-top-right-radius: 1em 10%;
}

我們在下面的示例中設定了所有四個角，然後更改了右上角的值以使其不同。您可以更改值來更改角。檢視border-radius的屬性頁面以檢視可用的語法選項。邊框半徑生成器可用於為您輸出圓角值。

您已閱讀完本文，但您能記住最重要的資訊嗎？在繼續之前，您可以進行一些進一步的測試以驗證您是否保留了這些資訊——請參閱測試您的技能：背景和邊框。

我們在這裡涵蓋了很多內容，您可以看到向盒子新增背景或邊框有很多內容。如果您想了解更多關於此處討論的任何功能的資訊，請瀏覽不同的屬性頁面。MDN 上幾乎每個頁面都有您可以使用的示例來增強您的知識。

在下一篇文章中，我們將瞭解文件的書寫模式如何與您的 CSS 互動。當文字不從左到右流動時會發生什麼？

• 上一篇
• 概述：CSS 構建塊
• 下一篇