在角度组件上添加多个背景，并使它们彼此对齐并响应

Question

我正在一个角度7的促销网站上工作 设计师给了我2张彼此完成的背景图片，其中1张是真实的素材，带有突出显示的部分（已在照片中显示）应与其他背景对齐。 1）我应该做些什么才能使两者保持一致并使它们响应。 我也应该使用img标签或背景CSS。 2）解决这类问题的更好方法是什么（我应该请设计师为我提供所有要素的完整背景吗？）

我尝试的最后一件事是使用img标签，直到我在图像顶部添加一些带有z-index的文本为止，这很好。我使用position：absolute和position：relative以便将元素插入背景的顶部，但会打乱所有内容。 这是html：

<div class="main-page-container">
    <div class="join-company-container">
        <img src="assets/img/photo-bg.jpg" class="responsive" alt="Standing">
        <app-join-company class="app-join-company"></app-join-company>
    </div>
    <div>
        <img src="assets/img/rectangle-fill-left.svg" class="responsive-image-left" alt="Smiley face">
    </div>
</div>

这是CSS：

.main-page-container {
  height: auto;
}

.responsive {
  width: 100%;
  height: auto;
  z-index: -1;
  position: absolute;
}


.responsive-image-left {
  width: 29.2%;
  height: auto;
  z-index: -1;

}

.app-join-company {
  position:relative;
  z-index:1;
}

** app-join-company-是在第一个背景顶部具有文本+其他元素的组件。

Answer 1

请注意，您没有任何课程SELECT * FROM (SELECT Type FROM dbo.[Table] WHERE tablename = 12) 。只有这样的组件（您只有类app-join-company）。我猜这里有文字。但是由于输入错误，文本实际上没有相对位置。

您也不会在任何地方使用类join-company-app。

除此z索引外，仅对定位的元素有效（位置：绝对，位置：相对，位置：固定或位置：粘性）。因此它不适用于responsive-image-right或.responsive-image-right。

Answer 2

在body内部，传递以逗号分隔的背景图片的url，在background-size属性中设置每张图片的大小（以逗号分隔）。通过设置每个图像的上/下和左/右（第一个值设置第一张图像的位置，依此类推），使用 background-position 属性根据需要定位背景图像。

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;

  background-position:
    top 16vh left -9vw,
    top 77vh left 24vw,
    top -30vh right -10vh,
    top 91vh right 8vw,
    bottom -126vh left 0em
  ;
  
  background-size: 30%, 20%, 56%, 25%, 100%;
  background-repeat: no-repeat;

  background-image: 
    url('/assets/images/img1.svg'),
    url('/assets/images/img2.svg'),
    url('/assets/images/img3.svg'),
    url('/assets/images/img4.svg'),
    url('/assets/images/img5.svg')
  ;
}