javascript - bxslider:在 div 之外显示一半图像

Question

tl;dr 版本:想要将半张图像放在 bxslider div 之外，但是 overflow:hidden 会导致轮播的每张幻灯片都显示出来。

我使用的代码:http://www.dtcontentguy.com/bxslider/

截图:http://screencast.com/t/bTTvC4VPEQ

长版:

因此，为要在我的网站上使用的轮播配置 bxslider。

它应该是什么样子(在 photoshop 中)(参见屏幕截图 1)

我主要关心的是我正在使用的圆形 png。为了匹配样式，我想将它的上半部分放在 div 之外。我定位它然后它看起来像这样，全部被切断(截图 2)

那是因为默认情况下有一个 overflow:hidden 来隐藏轮播的其他部分。如果我关闭 overflow:hidden，图像看起来不错，但当然会显示其他元素(屏幕截图 3)

如何让图像与轮播相符，但又绕过溢出:隐藏？

谢谢!

Answer 1

一种方法是增加容器的高度并将内容向下推，如下所示:

/* Increase container height, align background to bottom */
.bx-wrapper .bx-viewport {
    height: 456px!important;
    background-repeat: no-repeat;
    background-position: bottom center;
}
/* Push slider arrows down */
.bx-wrapper .bx-controls-direction a {
    margin-top: 25px;
}
.bxslider {
    margin: 0;
}
/* Push slider content down */
.bxslider li {
    padding-top: 184px;
}
/* Position image at top center */
.bxslider li img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -91px;
}