容器外的背景图像 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 只是为了好玩，但这也适用于其他较旧的布局方法。

容器外的背景图像 css

background images outside of a container css

html

css

background

sidebar