褪色背景图像与图像在顶部

Fading background image with image ontop

本文关键字：图像 顶部 褪色 背景      更新时间：2023-09-26

我试图创建一个div，有一个褪色的背景图像与另一个固定的图像在此之上。我试图添加在顶部的svg图像不与div保持固定，它也随着背景淡入和淡出。我怎样才能停止图像褪色并保持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;
}

问题是，当你淡出div时，你也淡出了该div的内容。基本上，所有都消失了，包括你的第二个svg图像，它是由#slidmediv包含的，也有其他图像作为背景。

首先，你应该重构你的代码，使其看起来更像这样: 
<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;
}

使用这个结构，您可以单独隐藏#slidemediv而不影响svg图像

相关文章：