-webkit-背景剪辑：文本;不管用

Question

我正在尝试创建一个简单的加载页面。我为波浪效果添加了一个动画，它的工作正常但是当我将背景剪辑到文本时，背景消失了......

body {
  margin: 0;
  padding: 0;
  background: #262626;
  font-family: ariel;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader h1 {
  margin: 0;
  padding: 0;
  font-size: 14em;
  color: rgba(255, 255, 255, 1);
  background-image: url(back.png);
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  -webkit-animation: animate 15s linear infinite;
}

@-webkit-keyframes animate {
  0% {
    background-position: left 0 top 50px;
  }
  20% {
    background-position: left 800px top -50px;
  }
  40% {
    background-position: left 1800px top -60px;
  }
  60% {
    background-position: left 2400px top -80px;
  }
  80% {
    background-position: left 3400px top -50px;
  }
  100% {
    background-position: left 4400px top 50px;
  }
}

<div class="loader">
  <h1>Loading...</h1>
</div>

Answer 1

您需要在color: transparent中将h1应用于background-clip: text工作

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
  background: #262626;
  font-family: ariel;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader h1 {
  margin: 0;
  padding: 0;
  font-size: 6em;
  background-image: url(http://lorempixel.com/400/200/sports);
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-animation: animate 15s linear infinite;
}

@-webkit-keyframes animate {
  0% {
    background-position: left 0 top 50px;
  }
  20% {
    background-position: left 800px top -50px;
  }
  40% {
    background-position: left 1800px top -60px;
  }
  60% {
    background-position: left 2400px top -80px;
  }
  80% {
    background-position: left 3400px top -50px;
  }
  100% {
    background-position: left 4400px top 50px;
  }
}

＆＃13;

<div class="loader">
  <h1>Loading...</h1>
</div>

＆＃13;

＆＃13;

＆＃13;