css图片上文字 |html和css代码示例

//HTML代码
<div class="img-container">
<img src="/img/image.jpg" alt="美丽的风景">
<p>这是图片上的文字</p>
</div>
//CSS代码
.img-container {
position: relative; /* 设置元素定位为相对定位 */
}
.img-container img {
display: block; /* 图片设置为块级元素 */
width: 100%; /* 图片宽度占满父元素 */
height: auto; /* 图片高度自适应 */
}
.img-container p {
position: absolute; /* 设置元素定位为绝对定位 */
top: 50%; /* 文字距离图片顶部50%位置 */
left: 50%; /* 文字距离图片左侧50%位置 */
transform: translate(-50%, -50%); /* 将文字居中 */
font-size: 24px; /* 文字大小 */
color: #fff; /* 文字颜色为白色 */
text-shadow: 1px 1px 2px #000; /* 设置文字阴影效果 */
z-index: 1; /* 设置文字在图片上方显示 */
}

以上代码中，大家首先将容器元素设置为相对定位，然后在其中嵌入一个图片和一个p标签。接着，大家将图片设置为块级元素，使其占据整个父元素的宽度，并让高度自适应。然后，大家设置p标签为绝对定位，将其位置设为距离顶部50%、左侧50%的位置，再通过transform属性将其居中。最后，大家为p标签设置了一些文字样式，如颜色、阴影、大小等，并将其z-index属性设置为1，使其在图片上方显示。

使用CSS将文字显示在图片上方，不仅可以让网页更加美观、引人注目，而且能够提高网页的可读性和用户体验。希望大家在开发网页的过程中能够善于运用这个技巧，打造出更加出色的效果。