Skip to content

文字视差背景

https://www.bilibili.com/video/BV1GT6qYNErL?buvid=XUED387E1DEE901B7D60E4B69803FF1DC7110&from_spmid=united.player-video-detail.drama-float.0&is_story_h5=false&mid=k5Nhobf4gdVpI9%2BvieI%2Big%3D%3D&plat_id=116&share_from=ugc&share_medium=android&share_plat=android&share_session_id=ce35613f-f72e-4ec5-9a16-44b4a84eaf65&share_source=COPY&share_tag=s_i&spmid=united.player-video-detail.0.0&timestamp=1736557393&unique_k=669FYRt&up_id=3546701442844736&vd_source=addacb3d2f4010b444798eebc62ffc61&spm_id_from=333.788.videopod.sections

天王盖地虎
less
    background: linear-gradient(to bottom,red 50%,blue 50%) 
                center / 100vw 100vh fixed;
    // -webkit-text-stroke: 1px red;

    color: transparent; 
    background-clip: text;

1、 css 有先后顺序

如果 background-clip 放在 background 前将会被覆盖

2、 background-attachment 需要进一步学习!

3、 red 50%,blue 50% 是 red 0 ~ 50,blue 是从 50 开始,50 ~ 100。