CSS是一種可以實現(xiàn)豐富圖形效果的技術(shù)，其中之一就是頭像疊加效果。本文將介紹如何使用CSS來實現(xiàn)這樣的效果。

.avatar-wrapper {
	position: relative;
	display: inline-block;
	border-radius: 50%;
	overflow: hidden;
	width: 100px;
	height: 100px;
}
.avatar-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 1;
}
.avatar-image {
	display: block;
	position: relative;
	z-index: 2;
	width: 100%;
	height: auto;
}

首先，我們需要一個裝載頭像的容器，我們可以使用一個div元素并設(shè)置其為relative布局。為了呈現(xiàn)圓形的頭像效果，我們需要將容器的邊框半徑設(shè)置為50%。由于我們可能需要堆疊多個元素，所以我們還需要為容器設(shè)置overflow:hidden;

接下來，我們要創(chuàng)建一個半透明的疊加層。這可以通過一個絕對定位的div元素來實現(xiàn)。我們需要將其寬度和高度設(shè)置為100%以確保它的寬度和容器的寬度一致。我們還需要將其位置設(shè)置到容器的左上角。為了讓他們堆疊在一起，我們還需要將其z-index設(shè)置為1。

最后，我們需要將頭像本身放在容器的頂部。這里我們可以使用一個img標簽。為了讓它始終保持在疊加層上方，我們需要將z-index設(shè)置為2;。由于我們的容器是圓形的，所以我們需要確保圖像可以填充到容器的寬度內(nèi)。因此，我們可以設(shè)置它的寬度為100%和height:auto;屬性。

現(xiàn)在，我們的頭像疊加效果成功實現(xiàn)了!