Javascript 基于图像ontop的背景图像淡入淡出

我试图创建一个div，它有一个淡入淡出的背景图像，另一个固定的图像在上面。我试图添加到的svg图像不会与div固定在一起，它也会随着背景淡入淡出。如何阻止img衰减并保持在div的中心？我尝试过使用绝对位置，但当页面处于移动视图时，图像会移到屏幕外

这就是我目前拥有的

<div class="slideme" id="slideme"> 
  <img style="max-width: 90%; "src="img/header-logo.svg" class="img-responsive">                    
</div> 

---

问题是，当您淡出div时，也会淡出该div的内容。基本上，所有内容都会消失，包括第二个svg图像，它包含在

#slideme

div中，另一个图像也作为背景

首先，您可能应该重构代码，使其看起来更像这样：

<div class="main-slider-container">
    <img style="max-width: 90%; "src="img/header-logo.svg" class="img-responsive">
    <div class="slideme" id="slideme"></div>    
</div>

---

使用此结构，您可以单独隐藏

#slideme

div，而不影响svg图像

请发布您的JSFIDLE。通过此结构，img ontop变得透明，并且可以通过图像看到滑动元素。我最初认为是因为它是SVG图像，但我尝试了PNG，但仍然面临同样的问题。如何删除图像的透明度？

<div class="main-slider-container">
    <img style="max-width: 90%; "src="img/header-logo.svg" class="img-responsive">
    <div class="slideme" id="slideme"></div>    
</div>

.main-slider-container{
  position:relative;
}

#slideme div{
  position:absolute;
  width:100%;
  height:200px;
  top:0px;
  right:0px;
  z-index:0;
}

> img {
  position:absolute;
  width:100%;
  height:200px;
  top:0px;
  left:0px;
  z-index:1;
}