img标签顶部的半透明div背景

Question

如何让 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/

Answer 1

尝试：

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 */}

确保调整 wrapper、img 和覆盖大小，添加图片等。

Answer 2

您是否尝试过设置 div 元素的不透明度？ 编辑： 重读您的问题后，我相信这可能不是您想要的。您是否也尝试过在 CSS 中显式设置滑块元素的 z-index？

Answer 3

我终于通过在 div 中使用背景的 img 而不是将其设置为背景图像来解决了这个问题。我的更新代码如下：

<div id="sliderFrame">
<div id="overlay"><img src="/_images/marqueeLayout/MarqueeTexture.png" /></div>
    <div id="slider">
        <img src="/_images/rotating-banner/001.jpg" />
    </div>
</div>

CSS：

#overlay{
  display:block;
  position:absolute;
  width: 850px;
  height: 470px;
  z-index: 2;
}

Answer 4

背景图片，顾名思义，不能永远出现在子元素的前面。因此，您需要依靠绝对定位将背景图像覆盖在幻灯片上：

#sliderFrame {
    position: relative;
    width: 850px;
    margin: 0 auto;
}
#slider {
    width:850px;
    height:470px;
    background:#fff url(/_images/marqueeLayout/loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;
    box-shadow: 0px 1px 5px #999999;
}
#slider-background {
    display: block;
    position: relative;
    width: 850px;
    height: 470px;
    z-index: 100;
}
#slider-background:before {
    background: url(/_images/marqueeLayout/MarqueeTexture.png) no-repeat;
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
}
#slider-background img {
    display: block;
}

我选择使用一个绝对定位在#slider-background 元素本身之上的伪元素，并通过将所有四个偏移量设置为0 来拉伸到元素的尺寸。请记住，您还需要声明@987654324 @ 及其子 <img> 元素作为块级元素。

http://jsfiddle.net/teddyrised/XJFqc/