CSS (Cascading Style Sheets) 可以幫助我們優(yōu)化網(wǎng)站的視覺效果，其中疊加效果就是其中一種非常實用的技術。舉個例子：

div {
width: 300px;
height: 200px;
background-color: #eee;
position: relative;
}
div:before {
content: "";
width: 100px;
height: 100px;
background-color: #000;
position: absolute;
top: 10px;
left: 10px;
opacity: 0.6;
z-index: 1;
}

這段代碼會創(chuàng)建出一個 300px 寬，200px 高的 div，它的背景顏色是 #eee，而且它會有一個半透明的黑色正方形在左上角。這個黑色正方形就是我們通過 CSS 疊加實現(xiàn)的。

代碼解析：

• 這個 div 的位置是相對的，意味著這個 div 的坐標是相對于它在 HTML 中的父元素的。
• 我們使用了 ::before 偽元素來創(chuàng)建黑色正方形。
• 偽元素類似于一個神秘的元素，它沒有具體的 HTML 代碼，但可以通過 CSS 聲明在任何元素上進行使用。在這個例子中，我們選擇將它加到 div 上。
• 給偽元素一個 content 聲明是必要的，但在這里具體值對于我們來說并不重要，所以我們選擇讓它為空。
• 我們使用了 height 和 width 屬性將偽元素定義為一個 100px 的正方形。
• 通過 position: absolute; 和 top: 10px; left: 10px; 我們將它固定在 div 的左上角。
• 我們使用 opacity: 0.6; 將它定義成半透明的。
• 最后，我們使用 z-index: 1; 使其在 div 的內(nèi)容之上進行疊放。

這只是 CSS 疊加效果的一個簡單示例，但它已經(jīng)足夠說明這個概念。如果您感興趣的話，還有很多其他的 CSS 疊加效果您可以嘗試。請記得在實踐中嘗試各種不同的參數(shù)，以達到自己想要的效果！