如何自定义 CSS Dark 叠加层的渐变答案

【问题标题】：how to customize gradient of CSS Dark overlay如何自定义 CSS Dark 叠加层的渐变
【发布时间】：2021-10-10 11:28:02
【问题描述】：

我在背景上有一个图像，我想制作一个叠加层，使其从顶部（较浅）逐渐变暗到底部完全变暗。

这是我的 CSS

    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(https://i.ytimg.com/vi/PaVG90AAN8U/maxresdefault.jpg);
    background-size: cover;
    background-repeat: no-repeat;

有了这个叠加层，所有的颜色渐变都是一样的。我怎样才能使它顶部更亮，底部更暗？

https://codepen.io/chiara-turbati/pen/OJmoKLp 这是一个例子

【问题讨论】：

试试这个：colorzilla.com/gradient-editor

标签： css background overlay gradient

【解决方案1】：

我应该在 rgba 前面放一个 0deg 以选择颜色的方向

linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1))

【讨论】：

【解决方案2】：

将 rgba 的 alpha/opacity 部分更改为 1

div {
      height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1)),
    url(https://i.ytimg.com/vi/PaVG90AAN8U/maxresdefault.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

<div>
  
</div>

【讨论】：

【解决方案3】：

你可以试试这个

height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1.0)),
url(https://i.ytimg.com/vi/PaVG90AAN8U/maxresdefault.jpg);
background-size: cover;
background-repeat: no-repeat;

不透明度需要根据您的要求进行更改。

【讨论】：