容器css外面的背景图像

Question

我正在尝试构建一个具有固定宽度容器的Web布局。该设计要求将背景图像放在容器外部，同时仍然将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来获得乐趣，但这也适用于其他较旧的布局方法。