CSS是一種用于網頁設計和控制網頁樣式的語言。其中一個最有趣的特性是它可以通過一些簡單的CSS代碼來實現彈出圖片的效果。那么，我們如何使用CSS來實現這一效果呢？

.popup {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.8);
display: none;
}
.popup img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-height: 80%;
max-width: 80%;
}

如上所示，首先我們將創建一個名為popup的CSS類，它將包含我們要彈出的圖像。我們設置節點的位置為固定的，并使用全屏寬度和高度來確保圖像以鋪滿整個屏幕的形式顯示。接下來，我們的背景顏色設置為半透明的黑色，以提供一個半透明的遮罩，讓我們的彈出圖像更風格化。最后，我們將display屬性設置為none，以確保在頁面加載時它不會顯示出來。

接下來，我們要定義圖像的屬性。我們使用CSS的absolute屬性將其設置為相對于其父節點的特定位置，這樣我們就可以控制它的位置，將其居中。我們為其設置了最大寬度和最大高度，以確保圖像不會超出屏幕范圍。

如何顯示圖像呢？為此我們需要JavaScript代碼。我們可以使用JavaScript來在單擊事件發生時顯示我們的圖像

document.getElementById("myButton").onclick = function() {
document.querySelector(".popup").style.display = "block";
};

只需在 HTML 頁面上的按鈕元素上添加此代碼，然后使用相應的ID來匹配即可。當按鈕被單擊時，它將搜索頁面上具有popup類的元素并將其顯示出來。

現在，我們已經了解了如何使用CSS代碼和JavaScript代碼來創建一個彈出圖像的效果。嘗試一下吧！