CSS是前端開發中一個重要的技術，它可以使網頁變得更加美觀。我們可以利用CSS來為圖片添加蒙版文字效果。例如當我們鼠標移動到圖片上時，可以顯示圖片的標題或描述。下面我們將通過一些示例來學習如何為圖片添加蒙版文字。

/*CSS樣式*/
img {
position: relative;
}
img:hover::after {
content: attr(alt);
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
padding: 10px;
color: #fff;
font-size: 1.2em;
}

首先我們需要在CSS樣式中將img元素的position屬性設置為relative。這是為了允許我們在圖片上添加絕對定位的元素。然后我們可以使用:hover偽類來為圖片添加鼠標懸停效果。當鼠標移到圖片上時，我們將使用::after偽元素在圖片上添加一個蒙版層。我們可以使用content屬性，將圖片的alt屬性的值作為蒙版上的文字。

接下來，我們使用position屬性將蒙版定位到圖片的底部并使其覆蓋整個圖片。我們還將蒙版背景顏色設置為半透明的黑色，以便與圖片形成一個對比度。最后，我們添加一些內邊距和更大的字體來增加蒙版的可讀性。

以上是為圖片添加蒙版文字效果的CSS實現方法，我們可以根據實際需求調整樣式。通過CSS的掌握，我們可以讓網頁設計更加出彩。