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属性中。此外,你可能需要根据实际情况调整样式。

备注:关于position具体使用什么值,建议参考“如何使用 Bootstrap框架 fixed 固定导航栏

滚动至顶部
扫描微信二维码联系我们 关闭