jquery - asp.net中如何使图片对背景幻灯片放映透明

Question

我正在为图像幻灯片使用一个简单的 jquery 并且它工作正常，但问题是我想在幻灯片上放置一个小图像并且该图像应该对带下划线的图像幻灯片透明， 但是我试图将图像幻灯片放在一个大的 Div 中，并将图像放在一个小的 div 中，并在同一个幻灯片 div 中，但是幻灯片放映正常但我看不到它上面的半透明图像，它的不透明度较低.所以请帮助我解决问题...... 这就是我放置两个 div 的方式......

<div class="logo">
   <img src="imag/header1.png" alt="" height="100%" width="100%" />

    </div>

  <div id="slideshow">



    <img src="imag/slider-1.jpg" alt="" class="active" height="100%" width="100%"/>
    <img src="imag/slider-2.jpg" alt="" height="100%" width="100%" />
    <img src="imag/slider-3.jpg" alt=""  height="100%" width="100%" />
    <img src="imag/slider-4.jpg" alt=""  height="100%" width="100%" />

   <img src="imag/slider-5.jpg" alt=""  height="100%" width="100%" />




</div>

CSS:

#slideshow {
    position:absolute;
    height:50%      /*300px*/;
    width:95.5%;
border-style:solid;
border-color:Red;  

}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}
div.logo
{
   position:relative;
    height:27%;
    width:100%;
    opacity:0.1;
  filter:alpha(opacity=60%); /* For IE8 and earlier */
  margin-top:0%;
  margin-left:0p%;
  zindex:1;


}

Answer 1

您可能知道，您不能将 Logo 包含在幻灯片 div 中，否则它将成为幻灯片的一部分。因此，而是在幻灯片和 Logo 周围放置一个具有相对定位的容器。将 Logo 设置为绝对定位并为其提供高 z-index，使其位于幻灯片顶部。

http://jsfiddle.net/jXJwG/2/

<div id="container" style="position: relative;">
    <div id="slideshow">
        <img src="http://placehold.it/300x300/ff0000" alt="" class="active" />
        <img src="http://placehold.it/300x300/ffff00" alt="" class="active" />
        <img src="http://placehold.it/300x300/ffffff" alt="" class="active" />    
    </div>
    <img src="http://placehold.it/60x60" alt="" style="position: absolute; top: 30px; right: 30px; z-index: 1000;" />
</div>