-webkit背景剪辑:文本和垂直居中文本

body {
  margin: 1rem;
}

.box {
  height: calc(100vh - 2rem);
  border: 1px solid;
  background-image: url(http://lorempixel.com/1280/720/);
  -webkit-background-clip: text;
}

.align {
  /* to right-align the text box */
  text-align: right;
  
  /* uncomment below to see the issue */
  /* display: inline-block; */
}

.title {
  /* Duplicated here for Safari */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: yellow;
  
  margin: 0;
  font: bold 6rem/1 sans-serif;
  text-transform: uppercase;
  text-align: center;
}

<article class="box">
  <div class="align">
    <h1 class="title">The Title</h1>
</article>