我想用固定的背景图像屏蔽文本,就像这样:
https://hitachiglobalweb.plasticbcn.com/
(滚动到底部->表示空中文字掩盖效果)
我可以制作文本蒙版,但无法获得用于视差效果的“固定背景”。
有许多技巧可以实现文本遮罩,但是没有一个背景固定的示例。 我已经尝试了所有这些方法,还试图提供固定的背景。
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;
}
所以,我知道如何屏蔽文本,但无法屏蔽背景:固定;