圖片上方半透明文字，是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)效果，可以增加頁(yè)面的美觀度和可讀性。通過(guò)使用CSS樣式，可以輕松實(shí)現(xiàn)這種效果。下面是一段示例代碼：

img {
position: relative;
}
img::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
img::after {
content: attr(data-text);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

上面代碼中的關(guān)鍵點(diǎn)如下：

1. 將圖片的position屬性設(shè)置為relative，以便后面的絕對(duì)定位生效。
2. 通過(guò)偽元素::before創(chuàng)建一個(gè)半透明的遮罩層。
3. 通過(guò)偽元素::after添加文字內(nèi)容，數(shù)據(jù)來(lái)自data-text屬性，可以根據(jù)實(shí)際情況調(diào)整。
4. 通過(guò)transform屬性使文字居中對(duì)齊。
5. 通過(guò)text-shadow屬性添加文字陰影，以增加可讀性。

通過(guò)上面示例代碼，我們可以輕松實(shí)現(xiàn)圖片上方半透明文字的效果，可以根據(jù)實(shí)際情況調(diào)整樣式，達(dá)到更好的視覺(jué)效果。