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
屬性允許您指定背景圖像的大小。
可以通過長度、百分比或使用以下兩個關鍵字之一來指定背景圖像的大小:contain
或 cover
。
下面的例子將背景圖像的大小調整為比原始圖像小得多(使用像素):
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
的其他兩個可能的值是 contain
和 cover
。
contain
關鍵字將背景圖像縮放為盡可能大的尺寸(但其寬度和高度都必須適合內容區域)。這樣,取決于背景圖像和背景定位區域的比例,可能存在一些未被背景圖像覆蓋的背景區域。
cover
關鍵字會縮放背景圖像,以使內容區域完全被背景圖像覆蓋(其寬度和高度均等于或超過內容區域)。這樣,背景圖像的某些部分可能在背景定位區域中不可見。
下面的例子展示了 contain
和 cover
的用法:
實例
#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 | 規定背景圖像的大小。 |