Question

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

交通远非平稳，而且非常缓慢。在Chrome和Firefox上运行正常。
有时，背景图像会垂直放大并变形。

有没有人知道替代方案或修改这些问题的调整？

Answer 1

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

您申请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; }

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

Answer 2

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

SuperSized的替代品

2 个答案: