Question

我想让图像70％可见粘在底部，其余部分隐藏在div后面。我按照z-index 10位置绝对和溢出：隐藏的教程。但图像仍然在其他div上显示和重叠。你可以帮帮我吗？谢谢！

HTML

<div class="screenshot search">
  <div class="container container-fluid">
    <div class="row">
      <div class="col-md-6">
        <img class="img-responsive" src="./img/sc-search@2.jpg" alt="pencarian"/>
      </div>
      <div class="col-md-6">
        <h3>
          search
        </h3>
        <p>
          test
        </p>
      </div>
    </div>
  </div>
</div>

CSS

        .screenshot {
      padding: 6em 0;
      height: auto;
    }

.screenshot img {
  width: 400px;
  max-width: 90%;
  z-index: 10;
  position: relative;
  overflow: hidden;
}

.search {
  background-color: #fafafa;
}

Answer 1

如果我理解的话，有很多方法可以做你想要的 - （截图会有所帮助，如果你包括＆＃34;工作代码＆＃34;包括JS小提琴或codepen链接），那么下面的例子您的内容div和图像的工作重叠。

  <div class="screenshot search">
      <div class="container container-fluid">
          <div class="row">
               <div class="wrap">
                   <div class="col-md-6 image-wrap">
                       <img class="img-responsive" src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="pencarian"/>
                   </div>
                   <div class="col-md-6 content">
                       <h3>search</h3>
                       <p>test</p>
                   </div>
              </div>
          </div>
      </div>
  </div>

.screenshot {
    padding: 6em 0;
    height: auto;
}

.wrap {
    position:relative;
}

.screenshot img {
    width: 400px;
    max-width: 90%;
    z-index: ;
    position: absolute;
}

.image-wrap {
    overflow:hidden;
    position:relative;
    height: 200px;
}

.content {
    display:block;
    background:white;
    position:absolute;
    top:0;
    width:100%;
 }

 .search {
    background-color: #fafafa;
 }

Fiddle

Read about Z-index here

在div上重叠图像并使其一半不可见

1 个答案: