html - 如何在背景图像上创建挖空文本，以便文本可以在图像上动画

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

I'd like to have a background image that only shows through knockout text and then have that text animate from the top of the page to the bottom of the page, showing the different parts of the background image as the text moves.

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

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 然后有 clip background 效果 - 请看下面的演示:

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>