从上向下渐浅的渐变色:如何用 CSS 实现?
在一些设计场景中,我们可能需要将从左到右的水平渐变色从上到下逐渐变浅。那么该如何使用 CSS 实现这一效果?
解决方案:使用 mask-image 与垂直渐变遮罩
要实现这一效果,可以使用 mask-image 属性并添加一个从上到下的渐变遮罩。
以下是一段 CSS 代码示例:
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; }
在这个示例中:
通过这种方式,我们可以实现一个从左到右过渡的渐变色,且从上到下逐渐变浅。