CSS是網頁設計中經常用到的一種樣式語言，通過CSS可以給網頁的各個元素添加樣式，讓網頁變得更加美觀和易讀。今天我們要介紹的是如何使用CSS實現圖片部分遮罩的效果。

實現圖片部分遮罩的效果，首先需要準備一個圖片和一些CSS樣式。我們可以使用以下的HTML代碼來插入圖片：

<div class="picture">
<img src="picture.jpg">
</div>

接下來需要添加CSS樣式來實現遮罩效果。下面是實現文字遮罩的基本樣式代碼：

.picture {
position: relative;
}
.picture::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.3);
}

代碼中，“::before”偽元素會在圖片前添加遮罩層。我們可以通過為偽元素設置背景色來實現遮罩層。代碼中的“rgba(0, 0, 0, 0.3)”表示顏色值，其中“rgba”的第四個參數是透明度程度，數值為0.3表示遮罩層是半透明的。

如果想要遮罩效果只顯示在圖片的一部分上，可以設置遮罩層的位置和大小。我們可以對偽元素設置“clip-path”的屬性，來實現遮罩效果只顯示在圖片的一部分上。例如，下面代碼可以讓遮罩效果只顯示在圖片的中央部分：

.picture::before {
clip-path: polygon(50% 25%, 100% 0, 100% 100%, 50% 75%, 0 100%, 0 0);
}

代碼中的“polygon()”函數，是用來繪制多邊形的。在函數的括號中，每一對值分別表示多邊形頂點的橫縱坐標。通過添加多個值組成多個頂點，就可以繪制出各種形狀的多邊形。

綜上所述，我們可以通過添加CSS樣式來實現圖片部分遮罩的效果。利用偽元素的技巧和多邊形裁剪，可以輕松實現各種想要的遮罩效果。