фоновые изображения за пределами контейнера css

Question

im пытается создать веб-макет, который имеет контейнер с фиксированной шириной. дизайн требует, чтобы фоновые изображения выходили за пределы контейнера, хотя, тем не менее, сохраняя текст 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 для развлечения, но это работает и с другими, более старыми методами компоновки.