褪色背景圖像與圖像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圖像