CSS 多重背景

在本章中,您將學習如何將多個背景圖像添加到一個元素。

您還將學到以下屬性:

  • background-size
  • background-origin
  • background-clip

CSS 多重背景

CSS 允許您通過 background-image 屬性為一個元素添加多幅背景圖像。

不同的背景圖像用逗號隔開,并且圖像會彼此堆疊,其中的第一幅圖像最靠近觀看者。

下面的例子有兩幅背景圖像,第一幅圖像是花朵(與底部和右側對齊),第二幅圖像是紙張背景(與左上角對齊):

實例

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

親自試一試

多重背景圖像可以使用單獨的背景屬性(如上所述)或 background 簡寫屬性來指定。

下面的例子使用 background 簡寫屬性(結果與上例相同):

實例

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

親自試一試

CSS 背景尺寸

CSS background-size 屬性允許您指定背景圖像的大小。

可以通過長度、百分比或使用以下兩個關鍵字之一來指定背景圖像的大小:containcover

下面的例子將背景圖像的大小調整為比原始圖像小得多(使用像素):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

這是代碼:

實例

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

親自試一試

background-size 的其他兩個可能的值是 containcover

contain 關鍵字將背景圖像縮放為盡可能大的尺寸(但其寬度和高度都必須適合內容區域)。這樣,取決于背景圖像和背景定位區域的比例,可能存在一些未被背景圖像覆蓋的背景區域。

cover 關鍵字會縮放背景圖像,以使內容區域完全被背景圖像覆蓋(其寬度和高度均等于或超過內容區域)。這樣,背景圖像的某些部分可能在背景定位區域中不可見。

下面的例子展示了 containcover 的用法:

實例

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

親自試一試

定義多個背景圖像的尺寸

在處理多重背景時,background-size 屬性還可以接受多個設置背景尺寸的值(使用逗號分隔的列表)。

下面的例子指定了三幅背景圖像,每幅圖像有不同的 background-size 值:

實例

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

親自試一試

全尺寸背景圖像

現在,我們希望網站上的背景圖像始終覆蓋整個瀏覽器窗口。

具體要求如下:

  • 用圖像填充整個頁面(無空白)
  • 根據需要縮放圖像
  • 在頁面上居中圖像
  • 不引發滾動條

下面的例子顯示了如何實現它:使用 <html> 元素(<html> 元素始終至少是瀏覽器窗口的高度)。然后在其上設置固定且居中的背景。最后使用 background-size 屬性調整其大小:

實例

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

親自試一試

Hero Image

您還可以在 <div> 上使用不同的背景屬性來創建 Hero Image(帶有文本的大圖像),并將其放置在您希望的位置上。

實例

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

親自試一試

CSS background-origin 屬性

CSS background-origin 屬性指定背景圖像的位置。

該屬性接受三個不同的值:

  • border-box - 背景圖片從邊框的左上角開始
  • padding-box -背景圖像從內邊距邊緣的左上角開始(默認)
  • content-box - 背景圖片從內容的左上角開始

下面的示例展示了 background-origin 屬性:

實例

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

親自試一試

CSS background-clip 屬性

CSS background-clip 屬性指定背景的繪制區域。

該屬性接受三個不同的值:

  • border-box - 背景繪制到邊框的外部邊緣(默認)
  • padding-box - 背景繪制到內邊距的外邊緣
  • content-box - 在內容框中繪制背景

下面的例子展示了 background-clip 屬性:

實例

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

親自試一試

CSS 高級背景屬性

屬性 描述
background 用于在一條聲明中設置所有背景屬性的簡寫屬性。
background-clip 規定背景的繪制區域。
background-image 為一個元素指定一幅或多幅背景圖像。
background-origin 規定背景圖像的放置位置。
background-size 規定背景圖像的大小。