<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0"/>
<title></title>
<style>
.div {
height: 150px;
width: 350px;
overflow: scroll;
background: linear-gradient(-30deg, rgba(0,0,0,.9) 0%, rgba(200,60,200,.9) 100%) top center/100% 100% no-repeat;//背景渐变色
background-attachment: local;//背景跟随滚动
-webkit-background-clip: text;//背景显示在文字笔画区域
background-clip: text;
color: transparent;//文字颜色设置为透明
}
</style>
</head>
<body>
<div class="div">
御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本 御用测试文本
</div>
</body>
</html>
效果: