容器css外的背景圖像

Question

即時通訊嘗試構建具有固定寬度容器的網頁佈局。該設計要求背景圖像走到容器外面，同時仍然將div的文本保留在容器內。下面是說明我的意思的圖像：

的黑色容器，紅色的是側邊欄。側欄上的內容應該保留在容器內，但側欄的不同部分具有不同的背景顏色。

有什麼建議嗎？

Answer 1

你可以用僞元素從演示管理這個

提取的相關代碼。

aside .block:before { 
    position: absolute; 
    content: ''; 
    left: 0; 
    top:0; 
    height: 100%; 
    width: 100vw; 
    background: rgba(0,255,0,0.5); 
    z-index:-1; 
} 

Codepen Demo

注：這裏的佈局方法，我用它沒有具體相關。我只是使用flexbox來獲得樂趣，但這也適用於其他較舊的佈局方法。