图像伸出它的容器

Question

如何将图像从容器中伸出来保持透明背景？我最近在许多类似创业公司的网站上看到了很多（如下）。可以通过玩溢出或翻译属性来实现吗？非常感谢。

编辑：这是图片startup template

的页面

image sticking out of it's container

Answer 1

试试这个：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<section class="section-1">
</section>
<section class="section-2">
  <img src="http://placehold.it/400x400" alt="" class="img-responsive img-overlayed">
</section>

＆＃13;

＆＃13;

＆＃13;

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