如何在 HTML/SCSS 中放置叠加图像 [关闭]答案

【问题标题】：How to put an overlaying Image In HTML/SCSS [closed]如何在 HTML/SCSS 中放置叠加图像 [关闭]
【发布时间】：2020-09-18 18:45:36
【问题描述】：

第一步：background-size: cover;

第二步：background-size: contain; background-repeat: no-repeat;

第三步是我需要的：第一个背景图片是cover，第二个是no-repeat的叠加层

此时我的 Html 包含一个div： <div class="news" data-background="@item.ImageUrl">

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

我怎样才能得到图片上最右边的例子？

关于 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;
}

【问题讨论】：

标签： html css sass

【解决方案1】：

你可以有一个带有背景图像的外部容器，一个带有backdrop-filter: blur(5px) 的内部容器和一个内部容器内部的img，它被限制在外部容器的宽度内：

body {
  margin: 0;
}

.container {
  margin: 0 auto;
  height: 500px;
  width: 500px;
  background: url("http://lowcadence.com/wp-content/uploads/2012/08/josiahrides.jpg");
  background-size: cover;
}

.image {
  display: flex;
  align-items: center;
  height: 100%;
  backdrop-filter: blur(5px);
}

img {
  width: 100%;
}

<div class="container">
  <div class="image">
    <img src="http://lowcadence.com/wp-content/uploads/2012/08/josiahrides.jpg" />
  </div>
</div>

注意：backdrop-filter 在 Firefox 中不受支持。

【讨论】：