在網頁設計中，圖片是非常重要的元素。很多時候，我們需要給圖片添加一個不規則的遮罩來使圖片更加美觀。那么，在CSS中，該如何實現這種效果呢？下面我們就來介紹一下。

首先，我們需要創建一個div容器，將圖片放在此容器中。CSS代碼如下：

<div class="container">
<img src="your-image-url" alt="your-image-description">
</div>

接著，我們需要在CSS文件中定義一個設置圖片遮罩的類名，如下：

.mask {
width: 100%;
display: block;
background: url(your-mask-image-url) no-repeat center center;
-webkit-mask-image: url(your-mask-image-url);
mask-image: url(your-mask-image-url);
}

其中，設置各個屬性的含義分別如下：

• width：寬度設置為100%；
• display：將display設置為block，使圖片以塊級元素顯示；
• background：使用背景圖像設置遮罩；
• -webkit-mask-image：在Safari瀏覽器上設置遮罩；
• mask-image：在其他瀏覽器上設置遮罩。

最后，在div容器中添加一個類名為mask的元素，如下：

<div class="container">
<img src="your-image-url" alt="your-image-description">
<div class="mask"></div>
</div>

至此，一個不規則圖片遮罩就完成了。通過這種方法，您可以在網頁設計中更好地利用CSS，使您的圖片更加美觀、生動。