可以使用 [mask-image](https://link.segmentfault.com/?enc=TRXUxJirPpUqWft7gU92MA%3D%3D.8ZiwZpmCdVU%2B3PWjlUYAQ2iU%2Fc8nrJj%2FMpCR9fb5PRX4vsNIj%2Bm2TeltcJqYJOHzEQw1nZIpjUtndeDuiFRB5g%3D%3D),加一个从上到下的渐变遮罩来实现。`MDN`上的描述需要了解一些像素计算相关的知识,一般UI同学会清楚一些 html, body { width: 100%; height: 100%; } html { background-color: #ffffff; } body { -webkit-mask-image: linear-gradient(to bottom, #000000, transparent); background-image: linear-gradient(to right, rgb(39, 121, 245), rgb(81, 221, 240) ,rgb(118, 216, 118)); background-repeat: no-repeat; } 