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

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 的标记执行相同的操作，方法是继承 [=15] 的背景=] 然后具有 剪辑背景 效果 - 请参阅下面的演示：

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>

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

how to create knockout text on a background image so that text can animate over the image

html

css

background-image