从淡化div

Question

我有一个div，使用javascript和这个div上面的静态图像淡化图像。我的功能有点像我想要的那样，但我不能让它看起来我想要它。

div上的svg类型的徽标变得有些透明，并且可以通过徽标看到div中的图像。我已经尝试过使用z-index和元素的不透明度，但没有运气。

这是我的代码。

<div class="main-slider-container">
 <img src="img/logo.svg" class="img-responsive">
 <div class="slideme" id="slideme"></div>
</div>

CSS：

.main-slider-container{
  position:relative;
   background: blue;

}

#slideme div{
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  right:0px;
  z-index:0;
  border-bottom: 10px solid #000000;

}

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

}

Answer 1

如果您可以在徽标下面看到， 建议您设置背景颜色。

> img {
    z-index:1;
    background-color:white;
}

Answer 2

您的SVG徽标是透明的，因为默认情况下它具有透明背景。

要更改它，只需添加背景颜色。

更改了CSS

img {
  background-color: white;
}

完整示例

为了清晰起见，我更改了你的img src以使用工作的SVG。

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

#slideme div{
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  right:0px;
  z-index:0;
  border-bottom: 10px solid #000000;
}

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

img {
  background-color: white;
}

<div class="main-slider-container">
 <img src="http://www.w3.org/html/logo/downloads/HTML5_1Color_Black.svg" class="img-responsive">
 <div class="slideme" id="slideme"></div>
</div>

此外，当您尝试使用z-index和opacity时，您可能没有看到任何效果，因为您的CSS选择器#slideme div和> img未选择任何给定的HTML元素。