Question

我正在尝试创建一个具有淡化背景图像的div，其中包含另一个固定图像。我试图添加的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时，你也淡出了那个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图像

与图象ontop的退色的背景图象

1 个答案: