.img-wrap {
position: relative;
}
.img-wrap img {
display: block;
max-width: 100%;
}
.img-wrap .text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}首先,需要将图片的外层元素设置为relative,这样才能在其内部设置absolute的文字元素。
其次,对于图片,可以设置宽度为100%,这样可以自适应图片的宽度,同时也方便在响应式布局中使用。
最后,设置absolute的文字元素,将其水平和垂直居中对齐,这样无论图片的大小和比例如何,文字都可以始终居中显示。
综上所述,CSS中实现文字放到图片上面并不需要过多的代码,只需要一些简单的CSS属性和妥善地控制布局即可。