如何获得div背景图片以显示在img html标签上方。想要这样做的原因是因为半透明纹理覆盖了横幅中的旋转图像。我不想每次都用图像剪切纹理。这样,将来添加/更新图像将更快。我已经尝试了这篇文章中给出的建议,但似乎没有用:CSS show div background image on top of other contained elements。谢谢你的帮助。

的HTML:

<div id="sliderFrame">
    <div id="slider">
        <span id="slider-background">
            <img src="/_images/rotating-banner/001.jpg" />
        </span>
    </div>
</div>


CSS:

#sliderFrame {position:relative;width:850px;margin: 0 auto;}

#slider {
  width:850px;height:470px;/* Make it the same size as your images */
  background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
  position:relative;
  margin:0 auto;/*make the image slider center-aligned */
  box-shadow: 0px 1px 5px #999999;
}

#slider-background{
  position:absolute;
  background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
  width: 850px;
  height: 470px;
  z-index: 100;
}


链接到实时站点:http://lltc.designangler.com/

最佳答案

尝试:

HTML:

<div id="wrapper">
    <div id="img"></div>
    <div id="overlay"></div>
</div>


CSS:

#wrappaer{display:inline-block; position:relative; width:100px; height:100px;
     box-shadow: 0px 1px 5px #999999;}
#img{display:block; position:absolute; z-index:1}
#overlay{display:block; position:absolute; z-index:2
     opacity:0.3;
     filter:alpha(opacity=30); /* For IE8 and earlier */}


确保调整包装器,img和覆盖层大小,添加图像等。

10-05 20:39
查看更多