CSS 點擊按鈕出現(xiàn)圖片框?qū)崿F(xiàn)方法

HTML代碼：
<button id="showImage">顯示圖片<div id="imageContainer" style="display:none;"><img src="image.jpg" alt="Sailing in the sunset"></div>CSS 代碼：
#imageContainer {
position: fixed; /* 確保圖片框相對于瀏覽器窗口固定位置 */
top: 0;
left: 0;
width: 100%; /* 占滿整個屏幕 */
height: 100%;
background-color: rgba(0,0,0,0.6); /* 半透明黑色背景 */
}
#imageContainer img {
display: block; /* 去掉默認(rèn)的內(nèi)聯(lián)行為 */
margin: auto; /* 水平居中 */
max-width: 90%;
max-height: 90%; /* 圖片不超過容器的 90% */
}

解釋：

首先，我們需要在 HTML 中創(chuàng)建一個 button 元素和一個 div 元素，button 元素的 id 為 "showImage"，div 元素的 id 為 "imageContainer"，并使用 style 屬性設(shè)置其為隱藏狀態(tài)。
在 CSS 中，我們使用 #imageContainer 來選中 div 元素，并設(shè)置其為固定位置（position: fixed）和占滿整個屏幕（width: 100%，height: 100%），并使用背景顏色 rgba(0,0,0,0.6) 來制造半透明黑色背景。
接著，我們選中 div 元素下的 img 元素，并設(shè)置其為塊級元素（display: block），并使用 margin 屬性來水平居中。此外，我們還設(shè)置了圖片的最大寬高度為容器的 90%，以保證圖片在任何分辨率下都不會溢出容器。
最后，在 JavaScript 中，我們使用 DOM 事件監(jiān)聽器來監(jiān)聽 button 元素的點擊事件，當(dāng)用戶點擊按鈕時，我們使用 document.getElementById() 方法找到 div 元素，并將其 display 屬性設(shè)置為 "block"，從而顯示圖片框。