HTML彈窗圖片代碼是網頁設計中常用的一種表現方式，可以用來展示圖片和提示信息。本篇文章將介紹如何使用HTML代碼實現彈窗圖片的功能。 首先，需要在HTML代碼中添加圖片鏈接和彈窗代碼。在p標簽中添加a標簽，用來包含圖片鏈接，代碼如下：

其中，#表示彈窗的名稱，在CSS樣式表中定義。img標簽用于顯示圖片，可以根據需要設置寬度和高度。 接下來，需要添加彈窗的CSS樣式表代碼。使用pre標簽包含CSS代碼，代碼如下：

.popup {
position: relative;
}
.popup img {
display: block;
max-width: 100%;
height: auto;
}
.popup:before {
position: absolute;
content: "";
height: 100%;
width: 100%;
background: rgba(0,0,0,0.8);
top: 0;
left: 0;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
.popup:target:before {
opacity: 1;
}
.popup:target .popup-inner {
transform: scale(1);
}
.popup-inner {
transition: transform 0.3s ease;
transform: scale(0);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
padding: 20px;
z-index: 10000;
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}

說明如下： .popup對應p標簽中的class名稱，用于定義彈窗樣式。img標簽的CSS樣式設置圖片顯示為塊級元素，并且列寬最大為100%，高度自適應。 .popup:before用于定義遮罩層，其內容為空，使用rgba設置遮罩層顏色為黑色，透明度為0.8，top和left設置為0，使用z-index設置層級，opacity設置透明度為0，使用transition設置漸變效果。 .popup:target:before表示當前目標為.popup的鏈接，應用遮罩層樣式，opacity設置透明度為1，顯示遮罩層。 .popup:target .popup-inner表示當前目標為.popup的鏈接，且目標元素為.popup-inner的內部元素，使用transform設置縮放效果，其中scale的值為0表示不可見，為1表示完全顯示。 .popup-inner用于定義彈窗內部元素的樣式，使用transform設置位移效果，z-index設置層級，box-shadow設置陰影效果。 完成上述HTML和CSS代碼之后，便實現了彈窗圖片的功能，用戶點擊圖片后彈出遮罩層和彈窗。