如何将2行文字标题放在图像上？

Question

我想把一个文本标题放在图像的中间，但它总是切成两半，而且不会移动到中心。

<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>

Answer 1

我想这就是你想要的..

在这里，文本标题在图像上，居中，而不是剪切。

​

header{
	position: relative;
}
header img{
	width: 100%;
}
h1{
    position: absolute;
    top: 0;
    color: #fff;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
}

<header class="text-center">
<img src="http://personal.psu.edu/xqz5228/jpg.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>

​

Answer 2

如果我没理解错的话，你想在整个页眉上使用背景图片，大小为封面。然后去掉你的旧图片标签。文本大纲技巧由此答案Outline effect to text提供

​

header.text-center {
  background: url(http://placekitten.com/700/700) center/cover;
  color: white;
  padding: 40px 0;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<header class="text-center">
  <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!</h1>

      </div>
    </div>
  </div>

</header>

​