Question

我想渲染一个照片堆栈。我使用了带有前后伪元素的div。这很好用。唯一需要注意的是：这个div应该在一些单色背景上呈现。所以我将这个div放在另一个具有背景颜色设置的div中。现在，伪元素不再可见。出了什么问题？

这是HTML：

<div id="main">
 <div class="gallery-stackone"></div>
</div>

这里是CSS：

#main {
background-color: green;
border: 1px solid blue;
width: 100%;
height: 300px;
}

.gallery-stackone {
  margin: 0; padding: 0;
    background: red;
    border: 6px solid #fff;
    float: left;
    height: 200px; width: 200px;
    margin: 50px;
    position: relative;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    border: 6px solid #fff;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.gallery-stackone:before {
    content: "";
    height: 200px; width: 200px;
    background: #eff4de;
    border: 6px solid #fff;

    position: absolute;
    z-index: -1;
    top: 0px;
    left: -10px;

    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

.gallery-stackone:after {
    content: "";
    height: 200px; width: 200px;
    background: #768590;
    border: 6px solid #fff;
    position: absolute;
    z-index: -1;
    top: 5px;
    left: 0px;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
}

以下是相应的fiddle

Answer 1

检查fiddle

我已将CSS更改为

#main {
    background-color: green;
    border: 1px solid blue;
    width: 100%;
    height: 300px;
    position:relative;
    z-index: -2;    
}

由于您为z-index提供了z-index:-1，并且为了使z-index工作，我已将.gallery-stackone:after值赋予-2，我还添加了position:relative div ..

在彩色背景div顶部不可见的伪元素

1 个答案:

检查fiddle