CSS 多重背景、background-blend-mode 混合模式

cover 的特性是讓背景圖整個「不變形」、「寬高等比例」、「在必要時局部裁切」的鋪滿整個容器空間，所謂的鋪滿空間，表示空間中不會有出現背景色這樣的範圍存在，「在必要時局部裁切」指的則是當你的圖片寬高比例與容器寬高比例不同時，要讓圖片不留白的鋪滿整個空間，勢必有部分圖片會超出容器的範圍，這時超出的區域就會看不到，也就是被切掉了意思了。 多數的時候網頁開發者都會利用這個方式來達到滿版背景的視覺設計目的。 所以別用 background-size: 100% 100%; 了，放心大膽的使用 backgroun

當高度沒有寫固定，背景會隨容器中的內容增加而自動向下延伸，導致背景顏色出現不連貫時，可以填入 background-color 作為容器中背景圖的延伸，以求整體版面一致性。

運用 CSS 的 background-color 樣式，可以運用任何支援的色彩單位，將元素的背景指定成特定顏色，這篇教學除了介紹 background-color 的用法，還會介紹 background-clip 裁切背景樣式，明確設定背景顏色延伸的範圍。

尤其是当需要让背景图片或颜色铺满整个元素时，如何正确地设置CSS样式变得尤为重要。 本文将详细介绍如何使用CSS实现背景铺满整个元素100%的效果。

今天我們要跟大家分享幾個製作滿版背景圖的方法。 現在先來確定一下我們的需求：圖片必須剛好填滿瀏覽器不能留有縫細，也不能因為圖片太大而出現捲軸。

Html背景圖片是設計網頁一定會用到的技巧，本文介紹bgcolor屬性語法如何設定背景顏色，再以background將整個頁面填滿背景圖，最後補充CSS滿版圖片封片的樣式效果。