在CSS中实现文字在图片中间且垂直居中，图片透明文字不透明，并使用RGBA背景

作者：热心市民鹿先生2024.01.08 12:06浏览量：14

简介：通过使用CSS样式，你可以实现文字在图片中间垂直居中，并且设置图片透明，文字不透明。同时，你可以使用RGBA颜色值来设置背景色，实现半透明的效果。

要在CSS中实现文字在图片中间垂直居中，并且设置图片透明、文字不透明，你可以使用以下代码：
HTML代码：

  1. <div class="image-container">
  2. <img src="your-image-source.jpg" alt="Image" />
  3. <p class="text">你的文字</p>
  4. </div>

CSS代码：

  1. .image-container {
  2. position: relative;
  3. width: 300px;
  4. height: 300px;
  5. background: rgba(255, 255, 255, 0.5);
  6. }
  7. .image-container img {
  8. display: block;
  9. width: 100%;
  10. height: 100%;
  11. object-fit: cover;
  12. opacity: 0.5;
  13. }
  14. .image-container p {
  15. position: absolute;
  16. top: 50%;
  17. left: 50%;
  18. transform: translate(-50%, -50%);
  19. color: #ffffff;
  20. font-size: 24px;
  21. text-align: center;
  22. }

这段代码将创建一个容器（.image-container），其中包含一张图片和一个段落。通过设置容器的position为relative，我们可以相对定位其中的元素。图片的object-fit: cover;确保图片始终填充整个容器，不论其尺寸如何。通过设置opacity为0.5，图片将呈现半透明效果。
段落文本被绝对定位在容器的中心。transform: translate(-50%, -50%);确保文本在水平和垂直方向上都居中。color: #ffffff;将文本颜色设置为白色，使其在半透明的图片上可见。最后，通过设置font-size和text-align属性，你可以控制文本的字体大小和对齐方式。
如果你想调整容器的尺寸或文本的字体大小，只需相应地修改CSS代码中的数值即可。

最热文章