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)
如何让图像与轮播相符,但又绕过溢出:隐藏?
谢谢!
最佳答案
一种方法是增加容器的高度并将内容向下推,如下所示:
/* 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;
}
关于javascript - bxslider:在 div 之外显示一半图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24347674/