固定背景的文本遮罩(如视差效果)

时间:2019-06-30 19:45:08

标签: html css

我想用固定的背景图像屏蔽文本,就像这样:

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

所以,我知道如何屏蔽文本,但无法屏蔽背景:固定;

1 个答案:

答案 0 :(得分:0)

也许没有足够的空间来固定背景,请尝试使用min-height 我为您检查了https://jsfiddle.net/je85nw7v/11/