專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-08-27 11:07:26 來源：動力節點 瀏覽1967次
CSS允許您通過background-image屬性為一個元素添加多個背景圖像 。
不同的背景圖像用逗號分隔，圖像彼此堆疊在一起，其中第一張圖像最接近觀看者。
以下示例有兩個背景圖像，第一個圖像是一朵花(與底部和右側對齊)，第二個圖像是紙張背景(與左上角對齊)：
例子
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
可以使用單個背景屬性(如上)或background速記屬性指定多個背景圖像。
以下示例使用background速記屬性(結果與上例相同)：
例子
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
CSSbackground-size屬性允許您指定背景圖像的大小。
可以以長度、百分比或使用以下兩個關鍵字之一指定大小：包含或覆蓋。
background-size當使用多個背景時，該屬性還接受背景大小的多個值(使用逗號分隔的列表)。
以下示例指定了三個背景圖像，每個圖像具有不同的 background-size 值：
例子
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.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;
}
CSSbackground-origin屬性指定背景圖像的位置。
該屬性采用三個不同的值：
border-box - 背景圖片從邊框的左上角開始
padding-box -(默認)背景圖像從填充邊緣的左上角開始
content-box - 背景圖片從內容的左上角開始
以下示例說明了該background-origin屬性：
例子
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSSbackground-clip屬性指定背景的繪制區域。
該屬性采用三個不同的值：
border-box -(默認)背景被繪制到邊框的外邊緣
padding-box - 背景被繪制到填充的外邊緣
content-box - 在內容框中繪制背景
以下示例說明了該background-clip屬性：
例子
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
以上就是動力節點小編介紹的"添加多個CSS背景的方法"，希望對大家有幫助，想了解更多可查看Java教程。動力節點在線學習教程，針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識，讓同學們更好更方便的學習和了解Java編程，感興趣的同學可以關注一下。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號