Html CSS-当父背景具有颜色集时，倾斜不起作用

如果父容器设置了背景颜色，则只会出现一条白色带。请告知

jsFiddle：

div{ 背景色：白色； } .倾斜{ 位置：相对位置； 显示：内联块； 填料：1米5米1米1米； 溢出：隐藏； 颜色：fff； } .斜：之后{ 内容：； 位置：绝对位置； 顶部：0；左侧：0； 宽度：100%；高度：100%； 背景：193654；； -webkit转换来源：100%0； -ms变换原点：100%0； 变换原点：100%0； -webkit变换：倾斜-20度； -ms变换：倾斜-20度； 变换：倾斜-20度； z指数：-1； } 标题在这里

---

除了文本颜色与背景颜色相同外，我觉得它正常显示。这似乎很简单，但我是否遗漏了更复杂的东西

div {
  background-color:white; //this is white
}
.slant {
  color: #fff; //this is also white
}

废除上述规定：

正如其他答案中所述，这是z-index问题，但是您需要在您的上设置一个负的边距-我也会给它一个类名，这样它就不会与代码的其余部分冲突

div {
  background-color:white;
  z-index:-999;
}
.slant {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
  z-index: 1;
}
.slant:after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #193654;;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-20deg);
  -ms-transform: skew(-20deg);
  transform: skew(-20deg);
  z-index: -1;
}

这是一个z指数问题。将z-index:-1放在斜面上时，它会消失，因为它被推到具有背景色的父元素后面。可以通过在.sland上添加z-index:1来解决此问题，这会将两个元素推到父元素背景色之上

div{ 背景色：白色； } .倾斜{ 位置：相对位置； 显示：内联块； 填料：1米5米1米1米； 溢出：隐藏； 颜色：fff； z指数：1； } .斜：之后{ 内容：； 位置：绝对位置； 顶部：0；左侧：0； 宽度：100%；高度：100%； 背景：193654；； -webkit转换来源：100%0； -ms变换原点：100%0； 变换原点：100%0； -webkit变换：倾斜-20度； -ms变换：倾斜-20度； 变换：倾斜-20度； z指数：-1； } 标题在这里

---

从：after元素和span标记中的文本中删除负z索引，并使用z索引init添加相对位置

div{ 背景色：白色； } .倾斜{ 位置：相对位置； 显示：内联块； 填料：1米5米1米1米； 溢出：隐藏； 颜色：fff； } .斜跨{ 位置：相对位置； z指数：1； } .斜：之后{ 内容：； 位置：绝对位置； 顶部：0；左侧：0； 宽度：100%；高度：100%； 背景：193654；； -webkit转换来源：100%0； -ms变换原点：100%0； 变换原点：100%0； -webkit变换：倾斜-20度； -ms变换：倾斜-20度； 变换：倾斜-20度； //z指数：-1； } 标题在这里 加载项。倾斜a级z索引：0，倾斜背景将显示

.slant {
    /* here */

    /* your codes */
    z-index: 0;
}

---

更改类的z索引似乎有效，但我想知道这是否是正确的方法