Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

但是，我想在您向下滚动页面时使用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>

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

Codepen

变换透明文字的背景？

2 个答案: