文字内容随背景变化
wenking 3/19/2024 样式效果
# 效果
Knowledge is power
# 代码
实现该效果的主要属性为 mix-blend-mode difference， 让文字内容和背景交融。该属性目前主流浏览器都支持。
# html
<div class="wrapper">
<video
autoplay
muted
loop
class="video-bg"
:src="videoSrc"
></video>
<div class="title">Knowledge is power</div>
</div>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# css
$bgHeight = 600px
.wrapper
position relative
height $bgHeight
.title
font-size 10em
color white
padding-top 0.8em
text-align center
mix-blend-mode difference
.video-bg
width 960px
height $bgHeight
position absolute
left 0
top 0
right 0
z-index -1
object-fit cover
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22