如何修复覆盖“z-index：-1”规则的背景颜色

Question

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

如果您将background-color或background-image放入功能区的父级或html正文，则功能区:after和:before border-color由于某种原因未显示，即使有z-index: -1。

原因是父级的background-color隐藏了它，但我找不到使用background-color和ribbon两者的解决方案：after和：before border-colors。

示威： http://codepen.io/anon/pen/XXOERg

Answer 1

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

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

这是codepen fork

Answer 2

添加父元素：

position: relative;
z-index: 0;

这是CodePen演示