时间戳

首页 > 解决方案 > 如何使用css在图像上方显示文本

html - 如何使用css在图像上方显示文本

问题描述

我试图在图像上显示文本，但它对我不起作用这是我的代码

 .banner{
          background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url(img/aboutus/s4.jpg);
          background-size: cover;
          background-attachment: scroll;
          background-repeat: no-repeat;
          height: 80vh;
          position: relative;
      }
      
      .img{
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
      }
     .info h5{
          position: absolute;
          z-index: 15;
          top: 0;
          left: 50%;
      }
    <section class="banner" >
        <div class="container">
            <div class="info">
                <h5>about us </h5>
            </div>
        </div>
        <img class="img" src="img/aboutus/home_overlay.png">
    </section>

结果显示不带文字

在此处输入图像描述

如何解决这个问题 ，抱歉英语不好。

标签： htmlcss

解决方案

这是一个非常简单的解决方案，格式最少，因此更容易编辑。

  .background {
    background: url(https://media.giphy.com/media/xTiTnxpQ3ghPiB2Hp6/giphy.gif) repeat;
    border: 2px solid black;
    height: 175px;
  }
  .info {
    padding-left: 20px;
    font-family: Arial;
    font-size: 20px;
    color: white;
  }
  <div class="background">
    <p class="info">About Us</p>
  </div>

推荐阅读