CSS - 背景與邊框
CSS 的背景樣式
背景圖片
background-image屬性允許在元素的背景中顯示影象。在下面的例子中，我們有兩個方框——一個是比方框大的背景影象，另一個是星星的小影象。
這個例子演示了關於背景影象的兩種情形。預設情況下，大圖不會縮小以適應方框，因此我們只能看到它的一個小角，而小圖則是平鋪以填充方框。在這種情況下，實際的影象只是單獨的一顆星星。
如果除了背景影象外，還指定了背景顏色，則影象將顯示在顏色的頂部。嘗試向上面的示例新增一個 background-color 屬性，看看效果如何。
控制背景平鋪
background-repeat
no-repeat— 不重複。repeat-x—水平重複。repeat-y—垂直重複。repeat— 在兩個方向重複。
在下面的示例中嘗試這些值。我們已經將值設定為 no-repeat，因此您將只能看到一個星星。嘗試不同的值—repeat-x 和 repeat-y—看看它們的效果如何。
調整背景影象的大小
在上面的例子中，我們有一個很大的影象，由於它比作為背景的元素大，所以最後被裁剪掉了。在這種情況下，我們可以使用background-size屬性，它可以設定長度或百分比值，來調整影象的大小以適應背景。
你也可以使用關鍵字:
cover—瀏覽器將使影象足夠大，使它完全覆蓋了盒子區，同時仍然保持其高寬比。在這種情況下，有些影象可能會跳出盒子外contain— 瀏覽器將使影象的大小適合盒子內。在這種情況下，如果影象的長寬比與盒子的長寬比不同，則可能在影象的任何一邊或頂部和底部出現間隙。
在下面的例子中，我使用了上面例子中的大圖，並使用長度單位來調整方框內的大小。你可以看到這扭曲了影象。
試試下面：
- 改變用於修改背景大小的長度單位。
- 去掉長度單位，看看使用
background-size: coverorbackground-size: contain會發生什麼。 - 如果您的影象小於盒子，您可以更改 background-repeat 的值來重複影象。
背景影象定位
background-position屬性允許您選擇背景影象顯示在其應用到的盒子中的位置。它使用的座標系中，框的左上角是 (0,0)，框沿著水平(x) 和垂直 (y) 軸定位。
注意：預設的背景位置值是 (0,0)。
最常見的背景位置值有兩個單獨的值——一個水平值後面跟著一個垂直值。
你可以使用像top和right這樣的關鍵字 (在 background-image頁面上查詢其他的關鍵字):
.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: top 20px;
}
最後，您還可以使用 4-value 語法來指示到盒子的某些邊的距離——在本例中，長度單位是與其前面的值的偏移量。所以在下面的 CSS 中，我們將背景從頂部調整 20px，從右側調整 10px:
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top 20px right 10px;
}
使用下面的示例來處理這些值並在框內移動星星。
注意：background-position是 background-position-x和 background-position-y的簡寫，它們允許您分別設定不同的座標軸的值。
漸變背景
當漸變用於背景時，也可以使用像影象一樣的 background-image屬性設定。
您可以在 MDN 的<gradient>資料型別頁面上，瞭解更多關於漸變的不同型別，以及使用它們可以做的事情。使用漸變的一個有趣方法是，使用 web 上可用的許多 CSS 漸變生成器之一，比如這個 。您可以建立一個漸變，然後複製並貼上生成它的原始碼。
在下面的示例中嘗試一些不同的漸變。在這兩個盒子裡，我們分別有一個線性梯度，它延伸到整個盒子上，還有一個徑向梯度，它有一個固定的大小，因此會重複。
多個背景影象
也可以有多個背景影象——在單個屬性值中指定多個background-image值，用逗號分隔每個值。
當你這樣做時，你可能會以背景影象互相重疊而告終。背景將與最後列出的背景影象層在堆疊的底部，背景影象在程式碼列表中最先出現的在頂端。
注意：漸變可以與常規的背景影象很好地混合在一起。
其它background-*屬性，該屬性值用逗號分隔的方式設定。例如下列background-image：
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px, top right;
不同屬性的每個值，將與其他屬性中相同位置的值匹配。例如，上面的 image1 的 background-repeat 值將是 no-repeat。但是，當不同的屬性具有不同數量的值時，會發生什麼情況呢？答案是較小數量的值會迴圈—在上面的例子中有四個背景影象，但是隻有兩個背景位置值。前兩個位置值將應用於前兩個影象，然後它們將再次迴圈—image3 將被賦予第一個位置值，image4 將被賦予第二個位置值。
我們來試一試。在下面的示例中包含了兩個影象。為了演示疊加順序，請嘗試切換哪個背景影象在列表中最先出現。或使用其他屬性更改位置、大小或重複值。
背景附加
另一個可供選擇的背景是指定他們如何滾動時，內容滾動。這是由 background-attachment屬性控制的，它可以接受以下值:
scroll: 使元素的背景在頁面滾動時滾動。如果滾動了元素內容，則背景不會移動。實際上，背景被固定在頁面的相同位置，所以它會隨著頁面的滾動而滾動。fixed: 使元素的背景固定在檢視埠上，這樣當頁面或元素內容滾動時，它就不會滾動。它將始終保持在螢幕上相同的位置。local: 這個值是後來新增的 (它只在 Internet Explorer 9 + 中受支援，而其他的在 IE4 + 中受支援)，因為滾動值相當混亂，在很多情況下並不能真正實現您想要的功能。區域性值將背景固定在設定的元素上，因此當您滾動元素時，背景也隨之滾動。
background-attachment屬性只有在有內容要滾動時才會有效果，所以我們做了一個示例來演示這三個值之間的區別——看看background-attachment.html(或者看看這兒的原始碼))。
使用 background 的簡寫
正如我在本課開始時提到的，您將經常看到使用 background屬性指定的背景。這種簡寫允許您一次設定所有不同的屬性。
如果使用多個背景，則需要為第一個背景指定所有普通屬性，然後在逗號後面新增下一個背景。在下面的例子中，我們有一個漸變，它指定大小和位置，然後是一個無重複的影象背景，它指定位置，然後是一個顏色。
這裡有一些規則，需要在簡寫背景屬性時遵循，例如:
background-color只能在逗號之後指定。background-size值只能包含在背景位置之後，用'/'字元分隔，例如：center/80%。
檢視 background的 MDN 頁面，以檢視所有的注意事項。
背景的可訪問性考慮
當你把文字放在背景圖片或顏色上面時，你應該注意你有足夠的對比度讓文字對你的訪客來說是清晰易讀的。如果指定了一個影象，並且文字將被放置在該影象的頂部，您還應該指定一個background-color，以便在影象未載入時文字也足夠清晰。
螢幕閱讀者不能解析背景影象，因此背景圖片應該只是純粹的裝飾；任何重要的內容都應該是 HTML 頁面的一部分，而不是包含在背景中。
邊框
在學習盒子模型時，我們發現了邊框如何影響盒子的大小。在這節課中，我們將看看如何創造性地使用邊界。通常，當我們使用 CSS 向元素新增邊框時，我們使用一個簡寫屬性在一行 CSS 中設定邊框的顏色、寬度和樣式。我們可以使用 border為一個框的所有四個邊設定邊框。
.box {
border: 1px solid black;
}
或者我們可以只設置盒子的一個邊，例如:
.box {
border-top: 1px solid black;
}
這些簡寫的等價於：
.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的屬性頁，檢視可用的語法選項。
玩轉背景和邊框
為了測試你的新知識，嘗試使用背景和邊框建立以下內容，使用下面的例子作為起點:
- 給方框一個 5px 的黑色實心邊框，圓角為 10px。
- 新增一個背景影象 (使用 URL balloons.jpg)，並調整它的大小，使它能夠覆蓋盒子。
- 給
一個半透明的黑色背景顏色，並使文字為白色。
注意：您可以點選這兒檢視解決方案——但請先嚐試一下自己能否實現。
總結
我們在這裡已經介紹了很多，您可以看到有很多要新增背景或邊框到盒子中。如果您想了解更多關於我們討論過的特性的資訊，請瀏覽不同的屬性頁面。MDN 上的每個頁面都有更多的用法示例，供您玩轉並增強您的知識。
在下一課中，我們將瞭解文件排版與 CSS 的相互影響。以及瞭解當文字不是從左向右流動時會發生什麼?
上一頁 Overview: Building blocks 下一頁