Text Masking with Background Fixed (like parallax effect)

问题: I want to mask text with Fixed background image just like this: https://hitachiglobalweb.plasticbcn.com/ (scroll to bottom --> that air written text masking effect...

问题:

I want to mask text with Fixed background image just like this:

https://hitachiglobalweb.plasticbcn.com/

(scroll to bottom --> that air written text masking effect )

I can make a text mask but unable to get that Fixed Background for parallax effect.

There are many tricks to achieve text masking, but none have example of fixed background. i have tried all these and also tried to give fixed background.

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

So, I know how to mask text but unable to background: Fixed;


回答1:

Maybe there is not enough space for the background to be fixed, try using min-height I made a fiddle for you check it https://jsfiddle.net/je85nw7v/11/

  • 发表于 2019-07-04 21:03
  • 阅读 ( 175 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除