Question

我对div有这种简单的纸阴影效果，但每当我设置父背景颜色属性时它就会被破坏。这是它的样子：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设置为relative上的.block2

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

<强> DEMO

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

3 个答案: