Question

tl; dr version ：想要将半个图像放在bxslider div之外，但overflow：hidden会导致旋转木马的每张幻灯片都显示出来。

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

屏幕截图：http://screencast.com/t/bTTvC4VPEQ

长版：

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

它应该是什么样子（在photoshop中）（见截图1）

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

那是因为默认情况下有一个溢出：隐藏以隐藏轮播的其他部分。如果我关闭溢出：隐藏，图像看起来很好，但当然其他项目显示（截图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;
}

bxslider：在div之外显示半个图像

1 个答案: