代码之家  ›  专栏  ›  技术社区  ›  Michal Hromas

图像从容器中突出

  •  -1
  • Michal Hromas  · 技术社区  · 9 年前

    如何使图像从容器中突出,保持透明背景?我最近在许多类似创业公司的网站上看到了很多(如下)。是否可以通过使用溢出或转换属性来实现?谢谢。

    编辑:这是一个页面,图片来自该页面 startup template

    image sticking out of it's container

    1 回复  |  直到 9 年前
        1
  •  0
  •   Karl Dawson    9 年前

    试试这个:

    .section-1 {
      height: 300px;
      background-color: #ddd;
    }
    
    .section-2 {
      position: relative;
      background-color: #eee;
    }
    
    .img-responsive {
      display: block;
      max-width: 100%;
      height: auto;
    }
    
    .img-overlayed {
      position: relative;
      top: -155px;
      margin: 0 auto -155px;
    }
    <section class="section-1">
    </section>
    <section class="section-2">
      <img src="http://placehold.it/400x400" alt="" class="img-responsive img-overlayed">
    </section>

    只要图像具有透明度,部分的背景就会显示出来。