一、效果
二、代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>css文字渐变效果</title>
</head>
<body>
<div style="height: 300px; width: 300px;">
<p style="font-size: 16px;margin-top:0;margin-bottom:10px;text-align: center;background: linear-gradient(90deg, #40e0d0, #ff8c00, #ff0080);
-webkit-background-clip: text;
color: transparent;">我本将心向明月，奈何明月照沟渠</p>
<img style="max-width: 100%;" src="https://img-blog.csdnimg.cn/20201217113618921.jpg"/>
</div>
</body>
</html>