html - 背景大于其容器

Question

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

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

到目前为止，这是我设置 HTML、TS 和 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。查看关于背景渐变 here