background图片叠加_如何在背景图片上添加颜色叠加？

我看到2个简单的选择：

在图像上具有半透明单个渐变的多个背景

巨大的插图阴影

渐变选项：

html {

min-height:100%;

background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);

background-size:cover;

}

阴影选项：

html {

min-height:100%;

background:url(http://lorempixel.com/800/600/nature/2);

background-size:cover;

box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);

}

我的一个旧的Codepen，上面没有几个例子

第三种选择

使用background-blen-mode：

该background-blend-modeCSS属性如何设定一个元素的背景图片应相互以及与元素的背景颜色相混合。

html {

min-height:100%;

background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);

background-size:cover;

background-blend-mode: multiply;

}