Question

我正在尝试将我的图像在我的标题图像边框内堆叠，这样我就可以消失并循环显示它们，因为当前淡出，改变attr和淡入，只是没有削减它，即使预加载图像，它仍然似乎必须随机加载图像，即使它已经在循环中显示。

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;
    ...
}

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

图像没有堆叠为褪色滑块

1 个答案: