可以使用 "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;
}
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241212/15d30205c232c06d360e1595ef17ee9c.png)