变换透明文本的背景

Question

好的，所以我在一个以图像作为文本背景的页面上有一个大标题：

.big-heading {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: url('https://images.pexels.com/photos/169789/pexels-photo-169789.jpeg?dl&fit=crop&w=640&h=426');
  -webkit-background-size: cover;
  background-size: cover;
  font-size: 100px;
}

<h1 class="big-heading">
  I'm<br>
  huge text<br>
  example<br>
  example
</h1>

但是，我想使用 ScrollMagic jQuery 插件在向下滚动页面时旋转文本的背景。我知道如何使用ScrollMagic，只是不知道如何在CSS中转换透明文本的背景。

任何帮助将不胜感激。

Answer 1

据我所知这是不可能的，也许你能做的最好的事情就是为background-position制作动画

.big-heading {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: url('https://images.pexels.com/photos/169789/pexels-photo-169789.jpeg?dl&fit=crop&w=640&h=426');
  -webkit-background-size: cover;
  background-size: cover;
  font-size: 100px;
  transition:all .8s ease-in;
}
.big-heading:hover {
  background-position:600px 300px;
}

<h1 class="big-heading">
  I'm<br>
  huge text<br>
  example<br>
  example
</h1>

Answer 2

不能旋转背景图像。要在文本中剪切图像，可以同时使用剪辑路径或图案。使用剪辑路径时，遮罩的对象是图像，因此如果不旋转文本，您将无法旋转它。我建议您使用图案并用图像填充文本，如下所示：

<svg>
  <defs>
    <pattern id="clipping">
      <image xlink:href="IMAGE URL" />
    </pattern>
  </defs>
  <text fill="url(#clipping)">
    <tspan x="0" dy="10">Text</tspan>
    <tspan x="0" dy="10">filled</tspan>
    <tspan x="0" dy="10">with</tspan>
    <tspan x="0" dy="10">image</tspan>
  </text>
</svg>

然后你只需要旋转图案的图像。

代码笔