Html 如何在图像上放置两行文字标题？

我想把一个文本标题放在图像的中间，但它一直被切成两半，并且没有移动到中间

<header class="text-center">
<img src="img\blueskycrop.jpg" class="img-fluid" alt="bluesky">

   <div class="container">
      <div class="row">
        <div class="col-xl-9">
            <h1 class="display-5">Build a landing page for your business or project and generate more leads!</h1z\>
        </div>
      </div>
   </div>

</header>

为您的业务或项目建立登录页，并生成更多潜在客户！

我想这就是你想要的

此处文本标题位于图像上方，居中，不剪切

标题{
位置：相对位置；
}
收割台img{
宽度：100%；
}
h1{
位置：绝对位置；
排名：0；
颜色：#fff；
左：50%；
转换：转换（-50%，0%）；
文本对齐：居中；
}

为您的业务或项目建立登录页，并生成更多潜在客户！

如果我正确理解您的问题，您希望在整个页眉上使用封面大小的背景图像。然后移除旧的图像标签。本答案提供了文本提纲

header.text-center{
背景：url(http://placekitten.com/700/700)中心/盖；
颜色：白色；
填充：40px0；
文本阴影：-1px-1px 0#000，1px-1px 0#000，-1px 1px 0#000，1px 1px 0#000；
}

为您的业务或项目建立登录页，并生成更多潜在客户！

你是什么意思？什么东西能减半？标题？什么不移动到中心？css:background:url（…）中心；-不起作用。@BogdanPavel

background

属性很棘手。在这种情况下，您必须使用格式

background:url（…）center/cover

。我输入了此代码，它可以工作，但如果我将字体大小调大，标题将分成3行。如果您只需要设置两行标题，并使用动态字体大小，则需要使用行夹。因为你不能只用css来做。。你可以找到关于线夹的信息。