Question

我有一组标题图像，希望它们彼此重叠。这个想法是，当您将鼠标悬停在我的导航栏中的某个元素上时，标题图像就会转换。当您将鼠标悬停在导航栏上时，我正在使用javascript更改图像的不透明度。

问题在于，现在这些图像从上到下以5幅图像的形式加载，我希望它只有一个图像显示在顶部，其余图像堆叠在该图像的后面。

html

<div id="images" class="col-xs-12">
    <img src="http://parksadventure.com/wp-content/uploads/2017/10/header-image-1-2.png" id="picture1" class="img-responsive col-xs-12" alt="Responsive image" width="100%" />
    <img src="https://whatson.ae/dubai/wp-content/uploads/2017/12/dubai-header.jpg" id="picture2" class="img-responsive" alt="Responsive image" width="100%" />
    <img src="https://inventor.challenges.org/wp-content/uploads/sites/25/2015/11/header-image-5.jpg" id="picture3" class="img-responsive" alt="Responsive image" width="100%" />
    <img src="https://us.boge.com/sites/row/files/boge-24h-recovery-header-big.jpg" id="picture4" class="img-responsive" alt="Responsive image" width="100%" />
    <img src="https://i.pinimg.com/originals/f2/de/8b/f2de8b0ad5abc3780a19dc7f78f22114.jpg" id="picture5" class="img-responsive" alt="Responsive image" width="100%" />
</div>




  #images {
padding: 0;
border-bottom: 3px solid red;
border-top: 3px solid red;
overflow:auto;

}

Answer 1

在UPDATE标记上使用position:absolute;。

赞：

<img />

这会将图像堆叠在一起。

希望这会有所帮助。

试图将元素彼此叠加

1 个答案: