一个常见的需求就是在图片上打字，这既可以增加图片的表现力，也可以为网页带来更多的亮点。那么，大家该如何使用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在图片上打字的方法。当然，这只是其中的一种方案，你可以根据自己的需求来选择不同的方法。