利用 CSS3 設計背景圖片自動縮放全螢幕展示效果

CSS3 設計背景圖片自動縮放全螢幕展示效果是許多新一代網頁設計的基礎，這樣的效果就是背景圖片隨著網頁大小縮放而自動跟著縮放至全螢幕，要設計出這樣的效果很簡單，只要將 CSS 的 background 屬性結合 CSS3 的 background-size 屬性，兩者搭配起來就能設計背景圖片自動全螢幕展示效果，我們會在 background 屬性中加入背景圖片以及圖片的呈現方式，也會在 background-size 屬性設定背景圖片的填滿方式，實際的視覺效果還不錯，也受到各種新版主流瀏覽器的支援。

利用 CSS3 設計背景圖片自動縮放全螢幕展示效果範例語法

透過以上的設定方式，就能讓背景圖片自動隨著瀏覽視窗大小縮放，而且會填滿整個瀏覽視窗，語法中的「margin:0px;」與「padding:0px;」的意思是網頁主體 body 標籤的外距與內距都設為 0，接著 background 屬性的設定方式解說如下：

background:#fff url(背景圖片網址) center center fixed no-repeat;

各個參數由左而右的意思是這樣

background:背景顏色背景圖片水平方向置中垂直方向置中背景圖片位置固定背景圖片不重覆顯示;

最後的「background-size: cover;」表示背景圖片要填滿整個容器，根據上面的設計就是整個瀏覽視窗。

補充，這樣網頁背景圖片自動填滿並自動縮放的效果所使用的是 background 屬性而不是 background-image 背景圖片屬性。

延伸閱讀