CSS技術是網頁設計中必不可少的一部分，它能夠為網頁增添色彩和美感，同時也能夠提高網頁的用戶體驗。在CSS中，80%背景圖居中是一個常見的需求，在這篇文章中我們將深入探討這個話題。

.container {
position: relative;
}
.bg-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background-image: url(my-image.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

首先，我們需要將包含80%背景圖的元素設為relative定位。接下來，我們需要一個子元素，它將作為背景圖的容器。這個子元素需要絕對定位，并設置top和left的值為50%。這樣就可以讓子元素的左上角位于容器元素的中央。

接著，我們需要用transform來將子元素向上和向左移動自身寬度和高度的50%。這樣就可以將子元素的中心點移動到容器元素的中央。為了讓背景圖占據合適的空間，還需要使用background-size屬性來設置背景圖片大小為cover。

最后需要注意的是，如果背景圖大小不是正方形，則需要將背景圖片的位置設置為center center，這樣就可以將圖片居中而不產生偏移。

總結來說，使用80%背景圖居中的技術并不難，只需要靈活運用CSS定位和背景圖片相關的屬性就可以實現。希望這篇文章對大家有所幫助。