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

您可能知道，您不能在幻灯片div中包含徽标，否则它将成为幻灯片的一部分。因此，请在幻灯片和徽标周围放置一个相对定位的容器。将徽标设置为绝对定位并赋予其高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>

Answer 2

您可以在position:absolute div的顶部.logo #slideshow div。确保您使用的是24位透明的.png文件，并将z-index的{{1}}设置为低于#slideshow的{{1}}

您似乎也错过了z-index

上.logo个样式中的连字符

如何使图像对asp.net中的背景幻灯片透明

2 个答案: