CSS3 圖片遮罩特效可以為網頁添加獨特的視覺效果，提升網頁的美觀程度。下面就詳細介紹如何實現這一特效。

//先定義遮罩層
.mask{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}
//定義圖片元素
.img{
	position: relative;
	width: 300px;
	height: 200px;
}
//移入元素時，顯示遮罩層
.img:hover .mask{
	opacity: 1;
}
//圖片背景
.img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

上述代碼中，我們為圖片元素定義了一個遮罩層，這個遮罩層的樣式包括了寬高、顏色、透明度和過渡動畫屬性。在將鼠標懸停在圖片元素上時，遮罩層的透明度會從 0 到 1 漸變，從而實現了圖片遮罩特效。

這里提供了一個簡單的實現圖片遮罩的方法，你可以自行根據自己的需求改變遮罩層的樣式和過渡動畫屬性，來實現更加獨特的效果。