如何修复覆盖 "z-index: -1" 规则的背景颜色

Question

使用纯 CSS 代码，我生成了一些色带。

如果你将 background-color 或 background-image 放入功能区的父级或 html 主体，则功能区 :after 和 :before border-color由于某种原因没有显示，即使有 z-index: -1.

原因是父级的 background-color 隐藏了它，但我找不到同时使用背景颜色和色带的解决方案：在边框颜色之后和：在边框颜色之前。

Answer 1

使用 z-index: -1 时，您将一个对象放在背景 <div/> 后面，该对象没有堆叠上下文。给它一个 z-index 它会起作用：

<div class="col-md-6" style="background-color:blue;z-index:0">
    <!-- ... -->
</div>

Answer 2

添加父元素：

position: relative;
z-index: 0;

这里有一个CodePen演示一下

How to fix background-color covering the "z-index: -1" rule