html - 如何修复覆盖 "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