CSS是前端開發中不可或缺的一部分，因為它可以讓我們在網頁中實現許多追求設計美感的效果。

一個常見的需求就是在圖片上打字，這既可以增加圖片的表現力，也可以為網頁帶來更多的亮點。那么，我們該如何使用CSS在圖片上打字呢？下面是一些實現的方法：

img {
position: relative;
display: inline-block;
}
img::before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
}
img::after {
content: "Hello, world!";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-weight: bold;
font-size: 24px;
}

以上代碼中，我們首先使用了position: relative;使得圖片具有相對定位的特性，并使用display: inline-block;使得圖片與其它元素在同一行顯示。接著，我們使用偽元素::before來實現圖片上色彩塊的效果。

::before和::after都是CSS3中出現的偽元素，它們不需要在HTML中寫入任何內容，只需要通過CSS設置樣式就可以在頁面中呈現。具體來說，我們在img元素的偽元素::before中，設置其content屬性為空字符串，表示該偽元素不包含任何實際內容。然后，我們設置該偽元素的position屬性為absolute，使其相對于img元素進行定位，top、left、width、height、background等屬性則分別用來定義該偽元素的位置、大小和顏色。opacity屬性表示該偽元素的透明度，可根據實際需求來設置。

接下來，我們使用偽元素::after來實現在圖片上打字的效果。該偽元素的content屬性設置為想要顯示的文本內容，同時也設置了該偽元素的position、top、left、transform、color、font-weight、font-size等屬性，用來控制文本在圖片中的位置、樣式等。其中，transform: translate(-50%, -50%);表示將該偽元素在屏幕中居中顯示。

以上就是使用CSS在圖片上打字的方法。當然，這只是其中的一種方案，你可以根據自己的需求來選擇不同的方法。