1

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

4

4 回答 4

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 和覆盖大小，添加图像等。

于 2013-11-06T19:14:59.130 回答
0

我终于通过在 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;
}
于 2013-11-06T19:59:55.537 回答
0

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

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

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

于 2013-11-06T20:34:40.370 回答
0

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

于 2013-11-06T18:59:15.277 回答