html - 图像不堆叠褪色滑块

Question

我正在尝试将我的图像放在我的 header-image-border 中进行堆叠，这样我就可以淡出并循环浏览它们，因为目前淡出、更改 attr 和淡入，只是不会削减它，即使使用 pre - 加载图像，它似乎仍然必须随机加载图像，即使它已经在循环中显示。

http://jordan.rave5.com/tmptemp/

CSS

            #header-image-border {
                z-index: 400;
                height: 453px;
                width: 100%;
                min-width: 1024px;
                max-height: 453px;
                transition: width 2s;
                -webkit-transition: width 2s;
                padding-bottom: 4px;
                background-image: url(images/border.png);
                background-repeat: repeat-x;
                background-position: bottom;
            }

            #header-image-border img {
                width: 100%;
                height: 453px;
                top: 0;
                left: 0;
            }

HTML

                    <div id="header-image-border">
                        <img class="header-img" id="hi1" src="slides/head1.jpg" alt="The Tiger Spot" />
                        <img class="header-img" id="hi2" src="slides/head2.jpg" alt="The Tiger Spot" />
                        <img class="header-img" id="hi3" src="slides/head3.jpg" alt="The Tiger Spot" />
                        <img class="header-img" id="hi4" src="slides/head4.jpg" alt="The Tiger Spot" />
                        <div class="image-grad">
                            <div id="drop-ucp-container">
                                <div id="drop-ucp"><input class="search" type="text" size="25" value="Search" /> <input class="submit" type="button" value="Search" /></div>
                            </div>
                        </div>
                    </div>

Answer 1

我认为问题是您忘记放置物品：

#header-image-border {
    position: relative;
    ...
}

#header-image-border img {
    position: absolute;
    ...
}

现在他们应该在彼此之上。