褪色背景图像与图像ontop

Question

我想创建一个具有衰落的背景图像与另一个固定的图像ontop上的div。我试图添加ontop的svg图像不会保持与div的固定，它也会随着背景而淡入淡出。我怎样才能阻止img褪色，并保持在div中心？我尝试过使用绝对位置，但当页面处于移动视图时，图像移出屏幕，

这就是我目前所拥有的。

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

CSS：

#slideme{ 
    position:relative; 
    width:100%; 
    height:200px; 
} 

#slideme div{ 
    position:absolute; 
    width:100%; 
    height:200px; 
} 

Answer 1

的问题是，当你淡出DIV，你淡出该分区也内容。基本上，一切都会消失，其中包含您的第二张svg图像，其中包含#slidme 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> 

CSS

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

采用这种结构，可以单独，隐藏#slideme DIV不影响SVG图像