CSS - 多重背景

各位有志於網頁設計的朋友們，大家好！今天我們要一起探索CSS多重背景的精彩世界。作為你們親切友善的電腦老師，我將帶領大家透過大量的範例和解釋來開展這段旅程。所以，拿起你們最喜歡的飲料，我們開始吧！

語法

在我們跳進深水區之前，讓我們從基礎開始。在CSS中使用多重背景的語法非常簡單：

選擇器 {
background: background1, background2, ..., backgroundN;
}

每個背景之間用逗號分隔，它們會從上到下堆疊。你列出的第一個背景將會在最上面，最後一個則會在最下面。這就像堆疊薄餅一樣 - 你先放在盤子上的那個會在最上面！

CSS 多重背景 - 使用 background-image 屬性

讓我們從一個使用 background-image 屬性的簡單範例開始：

.multi-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-repeat: no-repeat, repeat;
background-position: center center, top left;
}

在這個範例中，我們將兩個背景圖像應用到一個元素上。top-image.png 將會放在上面且不重複，而 bottom-image.png 則會在下面並且會重複。頂部的圖像會居中，底部的圖像則會從左上角開始。

CSS 多重背景 - 使用 background-size 屬性

現在，讓我們看看我們如何控制背景圖像的大小：

.sized-bg {
background-image:
url('small-icon.png'),
url('large-pattern.png');
background-size: 50px 50px, cover;
background-repeat: no-repeat, repeat;
background-position: top right, center;
}

在這裡，我們將 small-icon.png 的大小設定為50x50像素，而 large-pattern.png 則會覆蓋整個元素。這對於將小標誌或圖標與較大的背景圖案結合使用非常有用。

CSS 多重背景 - 使用 background 屬性

background 簡寫屬性讓我們能夠一次性設定所有的背景屬性：

.shorthand-bg {
background:
url('top-layer.png') no-repeat center / 100px,
linear-gradient(to bottom, #f00, #00f) no-repeat center / cover;
}

這個範例將圖像與漸變背景結合。圖像居中並設定為100像素，而漸變則會覆蓋整個元素。這就像在色彩繽紛的聖代上放上一顆櫻桃！

CSS 多重背景 - 全尺寸圖像

有時候，你希望一張圖像能夠覆蓋整個背景：

.full-size-bg {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('landscape.jpg') no-repeat center center / cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2em;
}

這會創造出一個全尺寸的背景圖像，並帶有半透明的遮罩。這對於創建有戲劇性的英雄區域或全頁背景非常完美。

CSS 多重背景 - 英雄圖像

提到英雄區域，這裡是如何創建的：

.hero-bg {
background:
linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.1)),
url('hero-image.jpg') no-repeat center center / cover;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
color: white;
}

這會創造出一個帶有背景圖像和從左到右漸變遮罩的英雄區域。這就像為你的網站盛大開幕設置舞台！

CSS 多重背景 - 使用 background-origin 屬性

background-origin 屬性決定了背景圖像的位置：

.origin-bg {
background-image: url('pattern.png');
background-origin: content-box, padding-box, border-box;
background-repeat: no-repeat;
border: 10px dashed black;
padding: 20px;
}

這個屬性在你想精確控制背景從元素框模型的哪裡開始時特別有用。

CSS 多重背景 - 使用 background-clip 屬性

background-clip 屬性定義了背景應該延伸多遠：

.clip-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-clip: content-box, padding-box;
border: 10px solid rgba(0,0,0,0.5);
padding: 20px;
}

這讓你能在框模型的不同的部分剪裁背景，創造出有趣的層次效果。

CSS 多重背景 - 相關屬性

這裡是一張你可以與多重背景一起使用的相關屬性表：

屬性	描述
background-image	設定一個或多個背景圖像
background-position	設定每個背景圖像的起始位置
background-size	指定背景圖像的大小
background-repeat	設定背景圖像的重複方式
background-origin	指定背景圖像的位置範圍
background-clip	定義背景應該在元素內延伸多遠
background-attachment	設定背景圖像是隨頁面滾動還是固定

記住，你可以單獨使用這些屬性，或者將它們結合在 background 簡寫屬性中以生成更簡潔的代碼。

好了，各位！現在你已經裝備了在CSS中創建有吸引力的多層背景的知識。記住，熟能生巧，所以不要害怕嘗試這些屬性。誰知道呢？你可能會創造出下一個網頁設計的大趨勢！

快樂編程，願你的背景永遠層次分明，完美無瑕！

Credits: Image by storyset