HTML 文字悬浮图片上方居中显示 CSS

文字悬浮图片并居中：文字悬浮在图片的上方，通常我们会把图片当作背景图片来处理，这样会比较简单实现。但是会遇到一个问题，如果需要窗口根据背景图片长宽比缩小放大，就没办法了。背景通常会裁剪图像。

现在是需要图片宽度100%，根据图片窗口与图片的宽高等比例缩小，我们讲解一下它通过下面的

<section class="css1">
  <img src="" class="css2">
  <p class="css3">pppppppp</p>
</section>

你可以使用以下样式为给定的HTML代码设置图片宽度为100%，并使<p>垂直居中于图片：

.css1 {
  position: relative;
}

.css2 {
  width: 100%;
}

.css3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 可选样式，根据需要调整文字样式 */
}

上述代码中，.css1 设置为相对定位，.css2 的宽度设置为100%，.css3 则使用定位，并通过top: 50%; left: 50%; transform: translate(-50%, -50%);将其垂直居中于图片。

请确保将图片路径添加到src属性中。此外，你可能需要根据实际情况调整样式。

相关文章