CSS中文字覆蓋圖片是設計中常用的一種效果，通常用于標題、標語等區域，能夠增加版面的美觀和設計感。

實現這種效果的方法是通過CSS的定位和層疊屬性來實現，具體步驟如下：

/*使用絕對定位*/
.mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1; /*設置層疊順序，比圖片高，使文字在上層*/
}
/*設置背景圖片*/
.cover-img {
position: relative;
display: inline-block;
background-image: url("example.jpg");
background-size: cover;
background-position: center;
z-index: 0; /*默認層疊順序，比遮罩低*/
}
/*設置文字樣式,為防止text-shadow影響*/
.cover-text {
position: relative;
color: #fff;
z-index: 2; /*比圖片高，文字在上層*/
text-shadow: none;
}

以上代碼中，mask類是一個遮罩層，用于將半透明的遮罩覆蓋在圖片上，達到文字與圖片融為一體的效果。cover-img是設置圖片的類，使用了相對定位和z-index屬性，使圖片在層疊時處于遮罩層下方。cover-text是設置文字的類，同樣使用了相對定位和z-index屬性，使文字在層疊時處于遮罩層上方。