CSS透明遮罩效果可以讓網頁上的元素變得半透明，讓網頁看起來更加美觀。以下是一些實現透明遮罩效果的CSS代碼。

/* 半透明黑色遮罩 */
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
/* 半透明白色遮罩 */
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
}
/* 顏色漸變遮罩 */
.gradient-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,0.7) 100%);
}

以上三種方式都是采用absolute定位方式，將遮罩覆蓋在需要半透明處理的元素之上。其中，第一種方式使用rgba來定義顏色，其中第四個值表示透明度，數值范圍為0~1，數值越小，顏色越透明；第二種方式也采用rgba來定義顏色，不同的是將第四個值設為0.5，使其呈現半透明效果；第三種方式使用漸變色來實現漸變透明的效果，具有更加豐富多彩的表現方式。