超大号的替代品

Alternatives to SuperSized

本文关键字：替代品      更新时间：2023-09-26

我正在寻找supersize的替代品。我目前使用3.0版本来显示一些旋转背景图像，并在Internet Explorer上发现两个问题。

  1. 这个过渡非常不顺利，而且非常缓慢。在Chrome和Firefox上运行正常。
  2. 有时，背景图像垂直放大和变形。

使用任意滑动条并将其浮动在使用z-index的页面内容后面。我喜欢Nivo Slider当我只是滑动图像，和bxSlider当我需要滑动任意内容的div或ul。

应用z-index的元素必须是position: relative;或position: absolute。关于position: absolute;需要注意的一点是，它将相对于第一个父元素position: relative;或position: absolute定位元素。这可能听起来令人困惑，那么举个例子:

把你的滑块放到<body>里面，然后用div:

<body>
    <div class="container">
        <!-- Your slider divs/imgs/ul -->
    </div>
    <div class="rest-of-page">
        ...
    </div>
</body>


/* Position .container relative to body (not really needed, just an example) */
body { position: relative; }
/* Float slider behind content of page, expanding to width/height of document
 * and use z-index of -1 to place it behind actual page content. */
.container { 
    position: absolute; 
    top: 0%; 
    left: 50%; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
}
/* Float the actual page content above slider using z-index of 0 */
.rest-of-page { position: relative; z-index: 0; }

应该可以了。通常你必须为你的滑块图像定义一个宽度，但我认为你可以得到它的工作。在我自己的项目中，我一直将滑块居中于页面，而不是占据整个背景，因此您的情况可能会有所不同。

我不确定这是否能给你所需要的。但你可以看看SuperBGImage。实际上，它的灵感来自于supersize，但有一些方便的改进

相关文章：