CSS背景

了解如何使用CSS更改元素的背景

可以使用幾個CSS屬性來更改元素的背景:

  • background-color
  • background-image
  • background-clip
  • background-position
  • background-origin
  • background-repeat
  • background-attachment
  • background-size

和速記屬性background,這可以縮短定義並將它們分組在一行中。

background-color接受顏色值,該顏色值可以是color關鍵字之一,也可以是rgb或者hsl價值:

p {
  background-color: yellow;
}

div { background-color: #333; }

通過指定圖像位置URL,可以將圖像用作元素的背景,而不必使用顏色:

div {
  background-image: url(image.png);
}

background-clip使您可以確定背景圖像或顏色使用的區域。默認值為border-box,它一直延伸到邊框的外邊緣。

其他值是

  • padding-box將背景擴展到填充邊緣,沒有邊框
  • content-box將背景擴展到內容邊緣,而無需填充
  • inherit運用父母的價值

將圖片用作背景時,您需要使用background-position財產:leftrightcenter是X軸的所有有效值,並且topbottom對於Y軸:

div {
  background-position: top right;
}

如果圖像小於背景,則需要使用background-repeat。應該是repeat-xrepeat-y或者repeat在所有軸上?最後一個是默認值。另一個值是no-repeat

background-origin使您可以選擇將背景應用到的位置:使用以下命令對整個元素(包括填充)(默認值)進行應用padding-box,使用包括邊框在內的整個元素border-box,不使用填充的元素content-box

background-attachment我們可以將背景附加到視口,以便滾動不會影響背景:

div {
  background-attachment: fixed;
}

默認情況下,值為scroll。還有另一個價值,local。可視化他們行為的最佳方法是這個Codepen

最後的背景屬性是background-size。我們可以使用3個關鍵字:autocovercontainauto是默認值。

cover擴展圖像,直到整個元素被背景覆蓋。

contain當一維(x或y)覆蓋圖像的整個最小邊緣時,將停止擴展背景圖像,因此該圖像已完全包含在元素中。

您還可以指定一個長度值,如果這樣,它將設置背景圖像的寬度(並且高度是自動定義的):

div {
  background-size: 100%;
}

如果您指定2個值,則一個為寬度,第二個為高度:

div {
  background-size: 800px 600px;
}

速記屬性background允許縮短定義並將它們分組在一行中。

這是一個例子:

div {
  background: url(bg.png) top left no-repeat;
}

如果使用圖像,但無法加載圖像,則可以設置後備顏色:

div {
  background: url(image.png) yellow;
}

您還可以將漸變設置為背景:

div {
  background: linear-gradient(#fff, #333);
}

免費下載我的CSS手冊


更多CSS教程: