Question

如何在img html标签上方显示div背景图像。想要这样做的原因是半透明纹理覆盖横幅中的旋转图像。我不想每次都要用图像剪切纹理。这样，将来添加/更新图像会更快。我已经尝试了这篇文章中给出的建议，但似乎没有成功：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 */}

确保调整包装，img和叠加尺寸，添加图片等。

Answer 2

你尝试过设置div元素的不透明度吗？编辑：在重新阅读您的问题后，我相信这可能不是您正在寻找的。您是否尝试过在CSS中明确设置slider元素的z-index？

Answer 3

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

<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来拉伸到元素的维度。请记住，您还需要声明#slider-background及其子<img>元素作为块级元素。

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

在img标记顶部的半透明div背景

4 个答案: