在網(wǎng)頁設(shè)計(jì)中，CSS經(jīng)常被用來美化頁面。其中一項(xiàng)常見的技巧是在圖上寫文字，使得文字和圖片形成更好的視覺效果。在CSS中，我們可以使用一些簡(jiǎn)單的樣式來實(shí)現(xiàn)這個(gè)效果。

/* 將文字放在圖片上 */
.image-with-text {
position: relative;
}
.image-with-text img {
display: block;
}
.image-with-text p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上面的代碼中，我們首先使用relative讓圖片容器成為相對(duì)定位的元素，這樣就能讓其內(nèi)部的p標(biāo)簽使用絕對(duì)定位位置更準(zhǔn)確。然后設(shè)置圖片為塊級(jí)元素，以確保其下文區(qū)域的正確計(jì)算。

接下來，我們通過給p標(biāo)簽設(shè)置絕對(duì)定位，并且把top和left都設(shè)為50%來水平垂直居中p標(biāo)簽。最后利用CSS transform屬性中的translate函數(shù)，微調(diào)p標(biāo)簽的位置以更好地展現(xiàn)文字。

/* 在圖片上加入半透明黑色背景 */
.image-with-text {
position: relative;
}
.image-with-text img {
display: block;
}
.image-with-text .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
padding: 20px;
color: #fff;
}

如果我們想進(jìn)一步改進(jìn)圖上文字的效果，可以考慮在文字上加上背景。這樣可以讓文字更加清晰，避免因?yàn)楸尘昂蛨D片相似而產(chǎn)生閱讀困難。

上面的代碼中，我們?yōu)槲淖秩萜魈砑恿艘粋€(gè)名為.text的類選擇器，并在其中添加了背景、填充和顏色等樣式屬性。

在實(shí)踐中，不同的圖文組合需要不同的CSS樣式來達(dá)到最佳效果。我們可以根據(jù)實(shí)際需要進(jìn)行調(diào)整和修改，使得文字和圖片更加和諧地結(jié)合在一起。