比其容器大的背景

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

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 gradienthere