一个div 实现 两个背景图与背景颜色

如下图 在一个div 上部与底部 为两张不同的背景图片，中间为背景颜色

关键代码：

background: linear-gradient(to bottom, #161823 0%, #161823 100%), url(../../images/settings/Tiktok/phone-head.png) left top no-repeat, url(../../images/settings/Tiktok/phone-foot.png) left bottom no-repeat;

background-blend-mode: color;

其中 background-blend-mode  一定要写，它是决定图片与颜色同时展示的关键属性。

定义和用法

background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。

默认值:	normal
Inherited:	no
Animatable:	no. 查看 animatable
版本:	CSS3
JavaScript 语法:	object.style.backgroundBlendMode="screen"

CSS 语法

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

---

属性值

值	描述
normal	默认值。设置正常的混合模式。
multiply	正片叠底模式。
screen	滤色模式。
overlay	叠加模式。
darken	变暗模式。
lighten	变亮模式。
color-dodge	颜色减淡模式。
saturation	饱和度模式。
color	颜色模式。
luminosity	亮度模式。