由于父母的背景颜色，CSS纸阴影效果正在被切断

Question

我有一个div的简单纸阴影效果，但每当我设置父的background-color属性时它就会被破坏。 这是它的样子： http ： //jsfiddle.net/9qahjjwx/

下面是代码。 如果我将在父母身上使用背景颜色，我该如何解决这个问题呢？

HTML

<section class="block1">
  <div class="onpaper effect2">
    <h2>Has Background Color on the parent</h2>
    <p>This block has background color in its parent that's ruining the shadow effect (due to z-index?)</p>
  </div>
</section>

<section class="block2">
  <div class="onpaper effect2">
    <h2>No Background Color</h2>
    <p>This block has <b>no</b> background color in its parent by changing the class..</p>
  </div>
</section>

CSS

.block1 {
    background-color: #f7f4e8;
    height: 200%;
}
.block2 {
    height: 200%;
}


.onpaper {
  margin:40px auto;
  width:75%;
  background-color: #d9d8c5;
  padding: 3% 6%;
}

.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}
.effect2:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

Answer 1

你需要在容器中添加一个z-index并将其设置为低于阴影： http ： //codepen.io/pageaffairs/pen/AgFJe

.block {
    position: relative;
    z-index: -2;
}

Answer 2

您可以在其间添加另一个包装元素，如下所示：

<section class="block">
   <div class="in-between">
      <div class="onpaper effect2">
         <h2>Has Background Color on the parent</h2>
         <p>This block has background color in its parent that's not ruining the shadow effect</p>
      </div>
   </div>
</section>

CSS：

.in-between {
    position: relative;
    z-index: 1;
}

这很难看，但它可以在父节点上设置负z-index的情况下工作（这可能会让你在父母的父母身上遇到麻烦）。

Answer 3

您需要设置负z-index并将position设置为.block2上的relative position

.block2 {
    height: 200%;
    background-color: #f7f4e8;
    position: relative;
    z-index: -2;
}

DEMO