背景大于其容器

Question

我正在尝试实现此布局，但我在设置背景方面遇到了问题，背景应该是屏幕尺寸的50％。我想把图像设置为背景，但每页上应该有不同的颜色。

是否可以仅使用background-color来实现它？

这就是我设置HTML，TS＆amp;的方法。 CSS到目前为止：

<div [class]="getBackground(title)">
  <div class="background-header">
    <img [src]="'assets/assess/Custom.png'" alt="">
    {{title}}
  </div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" *ngFor="let theme of pillar.data; let i = index">
        <button rh-btn-theme  full-btn [ngClass]="{'ripple': true}" [issue]="theme" (click)="presentModal($event, theme);"></button>
      </div>
    </div>
  </div>
</div>

TS

getBackground(pillar) {
  switch (pillar) {
    case "People":
      return "background-people";

    case "Land":
      return "background-land";   

    case "Crop":
      return "background-crop";     

    case "Business":
      return "background-business";

    default:
      return "background-custom";
  }
}

CSS

  .background-header {
    width: 100%;
    height: 80%;
    display: block;
    position: relative;
    img {
      display: inherit;
      background-color: #000;
    }
  }

  .background-people {
    background-color: #335F6E;
  }
  .background-land {
    background-color: #006533;
  }
  .background-crop {
    background-color: #7F4020;
  }
  .background-business {
    background-color: #F8DC0B;
  }
  .background-custom {
    background-color: map-get($colors, primary);
  }

Answer 1

是的，您可以background gradient：

来完成

.content {
  width: 100%;
  height: 300px;
  border: solid 2px #123;
  background: linear-gradient( red, red 50%, white 50%, white);
}

<div class='content'></div>

不要忘记genarte跨浏览器的CSS。请参阅background gradient here