在制作網站時，經常使用大背景圖來讓整個頁面更加美觀。但是，如何讓超大背景圖在不同大小屏幕中居中呢？ 首先，我們需要了解CSS中的背景圖的屬性。其中，background-size屬性可以設置背景圖像的尺寸，如： ```CSS background-size: cover; ``` 這個屬性值可以將背景圖像縮放至完全覆蓋背景區域，但是在超大背景圖的情況下，會導致圖片變形過度。 那么，我們可以使用background-position屬性來控制背景圖像的位置。如下面的代碼將背景圖像居中顯示： ```CSS background-position: center center; ``` 但是，如果我們只是使用這個屬性，超大背景圖就只能在可視區域內顯示一部分，而不是完整地顯示。 針對這個問題，我們可以使用CSS3的多媒體查詢（Media Query）來判斷當前屏幕的寬度，然后使用JavaScript動態計算背景圖像的位置。如下面的代碼實現將超大背景圖完整地居中顯示： ```CSS @media screen and (min-width: 1200px) { body { background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } @media screen and (max-width: 1199px) { body { background: url(bg.jpg) no-repeat center top fixed; -webkit-background-size: auto 100%; -moz-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%; } }``` 在上述代碼中，當屏幕寬度大于等于1200px時，我們使用background-size：cover屬性，將背景圖像縮放至完全覆蓋背景區域。當屏幕寬度小于1200px時，我們只將背景圖像的高度設為100%，而寬度設為auto，因為過寬的背景圖像會導致超出屏幕范圍。 在JavaScript中，我們使用window.load()方法來確保所有元素都加載完成后才執行計算。然后使用$(window).width()來獲取當前屏幕寬度，并按照背景圖像的原始比例計算出高度和寬度。最后，我們使用background-position屬性來將背景圖像的偏移量設為-calculated_offset px 0，這樣就可以實現完整地居中顯示超大背景圖。 綜上所述，使用CSS3多媒體查詢和JavaScript動態計算背景圖像位置是讓超大背景圖居中的一種解決方案，能夠讓網站更加美觀和優雅。