CSS是一種常用的前端開發(fā)語言，它可以幫助我們實現(xiàn)網(wǎng)頁的各種效果。其中，把文字打在圖片上是一種常見的效果。下面介紹一下如何通過CSS來實現(xiàn)。

.img-text {
position: relative;
}
.img-text img {
display: block;
width: 100%;
}
.img-text span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
}

以上就是實現(xiàn)效果需要的CSS代碼了。首先，我們要在圖片所在的元素上設(shè)置position: relative屬性，以便給后續(xù)添加的文字一個定位的參照點。

然后，在圖片元素上設(shè)置display: block;和width: 100%;以保證圖片占據(jù)整個容器。

最后，在圖片元素的兄弟元素span里添加需要打在圖片上的文字，并設(shè)置其position: absolute；left: 50%; top: 50%;以將文字定位在圖片的中心位置。同時，需要用transform屬性平移元素以保證其居中。此外，還可以通過color設(shè)置文字的顏色，font-size設(shè)置文字的大小，font-weight設(shè)置文字的加粗程度，text-shadow添加文字陰影等等樣式屬性來美化文字。

以上就是CSS實現(xiàn)把文字打在圖片上的方法，你也可以根據(jù)需要作出適當(dāng)修改以滿足不同的設(shè)計需求。