使用 linear-gradient 给图片加“滤镜”

• 为了使图片更适合作背景，可以给图片上加上一层半透明的颜色，减小对比度和亮度。
• 使用linear-gradient来做到这一点。

示例一

• 原图：
• 加上代码：

body {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to bottom, rgba(236, 227, 170, 0.498), rgba(252, 213, 98, 0.5))
                    , url(office.jpg);
    background-size: contain;
}

• 原图变为：

示例二

• 原图：
• 加上代码：

body {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to bottom, rgba(245, 140, 137, 0.498), rgba(175, 241, 109, 0.5)), url(balls.jpg);
    background-size: contain;
}

• 原图变为：