html - 固定背景的文本 mask (如视差效果)

Question

我想像这样用固定背景图片遮盖文本:

https://hitachiglobalweb.plasticbcn.com/

(滚动到底部-->空中书写文字遮蔽效果)

我可以制作文本蒙版，但无法获得视差效果的固定背景。

实现文字 mask 的技巧有很多，但没有固定背景的例子。这些我都试过了，也试过给定背景。

https://css-tricks.com/masking-vs-clipping-use/

<div class="vert_clip_cont">
  <div class="vert_clip mask two">CNC</div>
</div>


.vert_clip_cont {
    position: relative;
}
.vert_clip {

transform: rotate(-90deg);
font-size: 190px;
font-weight: 800;
padding: 0px 0;
background: url(../images/fi.png);
background-clip: text;
color: transparent;
background-attachment: fixed !important;
background-size: 100% auto;
position: absolute;
left: -100px;
}

所以，我知道如何屏蔽文本但无法背景:已修复；

Answer 1

可能没有足够的空间固定背景，尝试使用min-height我做了一个 fiddle 给你看看https://jsfiddle.net/je85nw7v/11/