在前端開發(fā)中，我們經(jīng)常需要使用操作圖層的 CSS，比如點擊添加圖層。下面介紹如何用 CSS 實現(xiàn)這個功能。
/* HTML 代碼 */
<div class="box"><button class="addLayer">添加圖層</button><div class="layer">
</div>/* CSS 代碼 */
.box {
position: relative;
width: 200px;
height: 200px;
}
.addLayer {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
display: none;
}
/* JavaScript 代碼 */
const addLayerBtn = document.querySelector('.addLayer');
const layer = document.querySelector('.layer');
addLayerBtn.addEventListener('click', () =>{
layer.style.display = 'block';
});
通過設(shè)置按鈕和圖層的位置和 z-index，讓按鈕位于圖層之上，在點擊按鈕時通過 JavaScript 改變圖層的 display 屬性為 block，從而實現(xiàn)顯示圖層的效果。
