2015-08-19 108 views
1

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

enter image description here

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

有什麼建議嗎?

+0

你可以提供代碼或小提琴鏈接 –

+0

在包裝兩者的容器上使用背景。 – connexo

回答

2

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

提取的相關代碼。

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來獲得樂趣,但這也適用於其他較舊的佈局方法。

+0

輝煌:)謝謝! – RMdev2411