从褪色 div 中的徽标中删除透明度答案

【问题标题】：Remove transparency from a logo in a fading div从褪色 div 中的徽标中删除透明度
【发布时间】：2015-11-25 02:52:58
【问题描述】：

我有一个使用 javascript 淡入图像的 div 和该 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;

}

【问题讨论】：

你能做任何example包括JS吗？

标签： jquery html css svg

【解决方案1】：

如果您似乎可以在徽标下方看到某些东西，我也建议您设置背景颜色。

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

【讨论】：

【解决方案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 元素。

【讨论】：