Question

我正在一个网站上工作，我需要使用不同的梯形图像，但我无法在框中看到可见的内容。这张图片：http://i.stack.imgur.com/Lq8zl.jpg

这是我的代码： HTML：

<div class="box-trapezoid">
    <div class="box-content">
      <strong>Lorem Ipsum</strong>
      <h4>Bridgestone</h4>
      <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit sed.</p>
      <a href="" title="">More</a>
    </div>
</div>

CSS：

box-trapezoid {
    position: relative;
    min-height: 200px;
    margin-top:20px;
    width: 100%;
    padding:10px 40% 0px 20px;
    background: url(http://i.stack.imgur.com/Lq8zl.jpg) no-repeat center;
    background-size: cover;
    border:1px solid #afafaf;
}
.box-trapezoid:before {
    position: absolute;
    z-index: 2;
    content: ' ';
    width: 50%;
    height: 100%;
    top:0;
    left: 0;
    background: #fff;
}
.box-trapezoid:after {
    position:absolute;
    z-index: 2;
    left:35%;
    display:inline-block;
    width:30%;
    background-color:#fff;
    height:100%;
    content: ' ';
    top: 0px;
    transform:skew(-20deg,0deg);
    -ms-transform:skew(-20deg,0deg); /* IE 9 */
    -webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
    z-index:2;
    overflow:hidden;
}
.box-trapezoid .box-content {
    z-index: 3;
}

提前谢谢你！

Answer 1

刚刚将 位置：相对 添加到 .box-content

因为 z-index仅适用于定位元素。

希望你想要这个。

＆＃13;

.box-trapezoid {
    position: relative;
    min-height: 200px;
    margin-top:20px;
    width: 100%;
    padding:10px 40% 0px 20px;
    background: url(http://i.stack.imgur.com/Lq8zl.jpg) no-repeat center;
    background-size: cover;
    border:1px solid #afafaf;
}
.box-trapezoid:before {
    position: absolute;
    z-index: 2;
    content: ' ';
    width: 50%;
    height: 100%;
    top:0;
    left: 0;
    background: #fff;
}
.box-trapezoid:after {
    position:absolute;
    z-index: 2;
    left:35%;
    display:inline-block;
    width:30%;
    background-color:#fff;
    height:100%;
    content: ' ';
    top: 0px;
    transform:skew(-20deg,0deg);
    -ms-transform:skew(-20deg,0deg); /* IE 9 */
    -webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
    z-index:2;
    overflow:hidden;
}
.box-trapezoid .box-content {
    z-index: 3;
  color:#000;
  position:relative;
}

＆＃13;

<div class="box-trapezoid">
    <div class="box-content">
      <strong>Lorem Ipsum</strong>
      <h4>Bridgestone</h4>
      <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit sed.</p>
      <a href="" title="">More</a>
    </div>
</div>

＆＃13;

如何在上面看到内容

1 个答案: