使用CSS可以讓我們的網(wǎng)頁(yè)更加的美觀，其中一個(gè)很常見(jiàn)的效果就是字體飄在圖片上。下面我來(lái)介紹一下這個(gè)效果的實(shí)現(xiàn)方法。

.img-wrapper {
position: relative;
display: inline-block;
}
.img-wrapper img {
display: block;
max-width: 100%;
height: auto;
}
.img-wrapper p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
color: white;
text-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}

首先，我們需要先將圖片和文字包裹在一個(gè)div容器中，并且將這個(gè)容器設(shè)置為relative定位。這是為了讓我們?cè)诤竺娼op標(biāo)簽設(shè)置絕對(duì)定位時(shí)以這個(gè)容器為準(zhǔn)。

然后，我們?yōu)閕mg標(biāo)簽設(shè)置了一個(gè)max-width: 100%;的CSS屬性，讓圖片寬度自適應(yīng)容器大小。接著，我們給p標(biāo)簽設(shè)置了絕對(duì)定位，并且將其頂部和左側(cè)都定位在50%的位置上。使用translate屬性將其向左上方偏移50%，實(shí)現(xiàn)讓文字水平垂直居中的效果。

最后，我們可以為p標(biāo)簽設(shè)置字號(hào)大小、顏色和字體陰影等效果，讓文字更加突出和美觀。

通過(guò)以上CSS代碼的設(shè)置，我們就可以實(shí)現(xiàn)文字飄在圖片上的效果了。這個(gè)效果不僅可以讓頁(yè)面更加有趣和生動(dòng)，還能看到更好的用戶體驗(yàn)提升。如果你在設(shè)計(jì)網(wǎng)頁(yè)時(shí)需要此效果，不妨試一試這段CSS代碼吧。