CSS是一種強(qiáng)大的樣式表語言，可以用來設(shè)置網(wǎng)頁的樣式，其中一個(gè)常見的功能就是設(shè)置圖片疊加效果。

img:hover {
position: relative;
top: -10px;
left: -10px;
z-index: 2;
opacity: 0.7;
}

代碼中，我們使用了:hover偽類選擇器，當(dāng)鼠標(biāo)懸停在圖片上時(shí)，會(huì)出現(xiàn)設(shè)置的疊加效果。首先我們?cè)O(shè)置圖片的position屬性為relative，這樣就可以通過top和left屬性來移動(dòng)圖片的位置。然后，我們使用z-index屬性來設(shè)置圖片的層次，數(shù)值越大的圖片會(huì)覆蓋在數(shù)值較小的圖片上面。最后，我們使用opacity屬性來設(shè)置圖片的透明度，數(shù)值越小的圖片越透明，可以產(chǎn)生疊加效果。

同時(shí)，我們也可以為圖片設(shè)置多個(gè)疊加效果，只需要添加新的樣式規(guī)則即可：

img:hover {
position: relative;
}
img:hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
z-index: 1;
}
img:hover::after {
content: "點(diǎn)擊查看大圖";
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 18px;
z-index: 2;
}

代碼中，我們使用了:before和:after偽類選擇器來為圖片設(shè)置兩個(gè)疊加效果。:before選擇器會(huì)添加一個(gè)半透明的白色層，用于突出顯示圖片。:after選擇器會(huì)添加一個(gè)文本層，用于提示用戶點(diǎn)擊圖片查看大圖。通過設(shè)置不同的層次和樣式，我們可以創(chuàng)建出各種不同的圖片疊加效果。