今天我們來學習一下如何使用CSS圖片遮罩來顯示文字吧。這種效果在設計上非常實用，可以讓圖片與文字融為一體，增強視覺效果。 首先，我們需要在HTML文件中插入一張背景圖片和一個div容器，代碼如下：

<div class="container">
<img src="background.jpg" alt="background">
<div class="text">
<p>Hello World!</p>
</div>
</div>

接著，我們需要為圖片設置樣式，將其設置為100%寬度和高度，并將其固定在容器中心。

img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

現在，我們需要為文本容器設置樣式，使其覆蓋在背景圖片上。這里我們使用偽元素:before來創建一個半透明的遮罩層，并設置文本居中和字體大小。

.text {
position: relative;
z-index: 1;
color: white;
text-align: center;
font-size: 2rem;
}
.text:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}

最后，我們需要為p標簽設置樣式，使其在遮罩層上方顯示且垂直居中。

p {
position: relative;
top: 50%;
transform: translateY(-50%);
}

現在，我們已經成功創建了一個CSS圖片遮罩顯示文字的效果，通過此方法我們可以輕松地將圖片與文字融為一體，加強頁面視覺效果。