效果
css实现
<template>
<ul class="masking">
<li v-for="item of list" :key="item">
<h1>{{item}}</h1>
<p>{{text}}</p>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: ['成长', '自强', '自立', '自信'],
text: `所谓长大，就是把原本看重的东西看轻一点，原本看轻的东西看重一点。很多人闯进你的生活，只是为了给你上一课，然后转身离开。当一切都静下来的时候，突然发现习惯是一件可怕的事情，让人戒不掉，忘不了。
每个人都会成长，或许，过程不一样；或许，所经历的事情不一样，但最后的结果是一样的。其实，成长意味着你将会失去一些东西，但也会得到一些东西，不管好坏，你愿不愿意，但它总能教会你很多东西，也会让你慢慢的成长。通向成功的路，只为勇敢的人敞开，走过风雨，经历挫折，才会有一条宽敞的成功之路，为你敞开！`
}
}
}
</script>
<style lang="less" scoped>
* {
margin: 0;
padding: 0;
}
.masking {
text-align: center;
li {
h1 {
font-size: 24vw;
color: transparent;
/*
background-attachment：
前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的
取值：
scroll：默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上
local：背景图相对于元素内容固定
*/
background-attachment: fixed; // 将背景图设置在body上
-webkit-background-clip: text; // 将文字之外的区域裁剪掉
}
&:nth-child(1) h1 {
background-image: url('@/assets/images/bg1.jpg');
}
&:nth-child(2) h1 {
background-image: url('@/assets/images/bg2.jpg');
}
&:nth-child(3) h1 {
background-image: url('@/assets/images/bg3.jpg');
}
&:nth-child(4) h1 {
background-image: url('@/assets/images/bg4.jpg');
}
}
}
</style>
核心代码：
background-image: url('@/assets/images/bg1.jpg');
background-attachment: fixed; // 将背景图设置在body上
-webkit-background-clip: text; // 将文字之外的区域裁剪掉
