CSS開光燈如何制作？這是一個常見的問題。開光燈引導訪問者對特定內容感興趣，增加了網站的交互性和用戶體驗。以下是實現CSS開光燈的方法。

.lightbox {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.5);
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
box-shadow: 0 0 30px rgba(0,0,0,0.6);
border-radius: 4px;
}
/* 關閉按鈕 */
.lightbox .close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
color: #fff;
cursor: pointer;
}
/* 打開光燈 */
img.lightbox-enabled {
cursor: pointer;
}
img.lightbox-enabled:hover {
opacity: 0.7;
}

在上面的代碼中，.lightbox類定義了一個黑色半透明背景和一個中央對齊的容器，該容器包含了圖片和一個關閉按鈕。.close-btn定義了關閉按鈕的樣式。.lightbox .close-btn和.lightbox img類分別用于定義光燈內部元素的樣式。

如果想要打開光燈，只需將img元素的類設置為“lightbox-enabled”。當鼠標懸浮在帶有.lightbox-enabled類的圖片上時，圖片的透明度會稍微降低，以提示用戶可以點擊打開光燈。

在JavaScript中，通過添加事件監聽器打開和關閉光燈：

var lightboxEnabledImages = document.querySelectorAll("img.lightbox-enabled");
for (var i = 0; i < lightboxEnabledImages.length; i++) {
lightboxEnabledImages[i].addEventListener("click", function() {
var lightbox = document.createElement("div");
lightbox.classList.add("lightbox");
var image = document.createElement("img");
image.src = this.src;
lightbox.appendChild(image);
var closeButton = document.createElement("span");
closeButton.innerHTML = "×";
closeButton.classList.add("close-btn");
lightbox.appendChild(closeButton);
document.body.appendChild(lightbox);
closeButton.addEventListener("click", function() {
document.body.removeChild(lightbox);
});
});
}

在上面的代碼中，查詢帶有.lightbox-enabled類的所有圖像，并向每個圖像添加一個click事件監聽器。當用戶單擊圖像時，該事件監聽器將觸發，創建一個新的div元素，包含原始圖像和一個關閉按鈕，并將其添加到文檔正文中。在關閉按鈕上添加單擊事件監聽器，以便在用戶單擊時從文檔中刪除光燈。

這就是制作CSS光燈的詳細步驟。