如何在背景图像上创建挖空文本，以便文本可以在图像上进行动画处理

Question

我希望有一个背景图像，该背景图像仅通过敲除文本显示，然后使该文本从页面顶部到页面底部进行动画处理，以显示背景图像随文本移动的不同部分。

我知道如何制作挖空文字

#screen1 h1 {
    display:block;
    margin: auto;
    font-family: 'proxima-nova', sans-serif;
    background-image: url('../img/my-image.jpg');
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 12rem;
    font-weight: 800;
}

但是我想要的更像是＃screen1上的背景图像，只显示出敲除文本。因此，当对动画文本进行动画处理时，它会显示背景图像的不同部分。

html：

<div id="screen1" >
<div style="">
<h1>MY TEXT</h1>
</div>  
</div>

CSS：

#screen1 {
    background: url(../img/my-image.jpg) no-repeat; 
    background-size: cover;
    overflow: hidden;
}
#screen1 h1 {
    display:block;
    margin: auto;
    font-family: 'proxima-nova', sans-serif;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-size: 12rem;
    font-weight: 800;
}

但这仅显示背景图像。我感觉我已经接近了。

Answer 1

  

我希望有一个背景图像，该背景图像仅通过敲除文本显示，然后使该文本从页面顶部到页面底部进行动画处理，以显示背景图像随文本移动的不同部分。

您可以在显示背景图像的同时为文本设置动画：

body {
 margin: 0;
 background-color: lightblue;
 overflow: hidden;
}

h1 {
  display: flex;
  justify-content: center;
  height: 100vh;
  margin: auto;
  font-family: 'proxima-nova', sans-serif;
  background: url('https://placekitten.com/g/200/300') no-repeat;
  background-size: cover;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 800;
  padding-top: 0;
  animation: animate 5s linear infinite;
}

@keyframes animate {
  to {
    padding-top: calc(100vh - 6rem);
  }
}

<h1>Text</h1>

---

您可以对标记进行相同的操作，将标记#screen1和h1嵌套在其中，方法是继承 h1的背景，然后剪辑背景效果-请参见下面的演示

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

#screen1 {
  background: url('https://placekitten.com/g/200/300') no-repeat, lightblue;
  background-size: 0; /* don't show the background yet */
  height: 100vh;
  overflow: hidden;
}

#screen1>div {
  background: inherit;
  /* background size is still zero */
  height: 100%;
}

#screen1 h1 {
  display: flex;
  justify-content: center;
  margin: 0;
  background: inherit;
  /* now show the background */
  background-size: cover;
  font-family: 'proxima-nova', sans-serif;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 5rem;
  line-height: 5rem;
  font-weight: 800;
  padding-top: 0;
  animation: animate 5s linear infinite;
  height: 100%;
}

@keyframes animate {
  to {
    padding-top: calc(100vh - 5rem);
  }
}

<div id="screen1">
  <div>
    <h1>MY TEXT</h1>
  </div>
</div>