如何在HTML/SCSS中放置覆盖图像

第一步：

背景尺寸：封面

第二步：
背景尺寸：包含；背景重复：无重复

第三步是我需要它的方式：第一个背景图像是
封面
，第二个是覆盖
无重复


此时，我的Html包含一个
div
：

我尝试了一些方法，但我总是只能添加一张图片，而不能添加第二张

如何获得图像上最右侧示例的结果

有关SCSS文件的一些额外信息

.vertical .news {
    position: relative;
    box-sizing: border-box;
    border-radius: 18px;
    background-position: center;
    background-size: cover;
    background-color: $DarkTurquoise;
    max-height: 85vh;
    height: 80vh;
    width: 30vw;
    margin-bottom: 3vw;
    margin-right: 1vw;
    margin-left: 1vw;
    overflow: hidden;
}

您可以将带有背景图像的外部容器、带有
背景过滤器：blur（5px）
的内部容器和限制在外部容器宽度内的
img
置于内部容器中：


正文{
保证金：0；
}
.集装箱{
保证金：0自动；
高度：500px；
宽度：500px；
背景：url（“http://lowcadence.com/wp-content/uploads/2012/08/josiahrides.jpg");
背景尺寸：封面；
}
.形象{
显示器：flex；
对齐项目：居中；
身高：100%；
背景滤镜：模糊（5px）；
}
img{
宽度：100%；
}