SuperSized的替代品[关闭]答案

【问题标题】：Alternatives to SuperSized [closed]SuperSized的替代品[关闭]
【发布时间】：2011-12-09 16:02:14
【问题描述】：

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

transicion 远非平滑，而且非常缓慢。在 Chrome 和 Firefox 上，这可以正常工作。
有时，背景图片会垂直放大和变形。

有没有人知道解决这些问题的替代方法或调整方法？

【问题讨论】：

【解决方案1】：

使用任何滑块并使用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>

然后是一些css：

/* 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; }

应该这样做。通常你必须为你的滑块图像定义一个宽度，但是通过一些摆弄我认为你可以让它工作。在我自己的项目中，我一直将滑块置于页面的中心，而不是占据整个背景，因此您的里程可能会有所不同。

【讨论】：

【解决方案2】：

我不确定这是否能满足您的需求。但是你可以看看SuperBGImage。实际上它的灵感来自于 supersized 但有一些方便的改进

【讨论】：