Question

好的，所以我想要发生的是我设置为背景图像以显示在页面上的所有其他元素之上 - 设置在右侧，一半在内容块上，一半到方...目前我的结构是：

    <div id="SideImage">
    <div id="Contain">
    <div id="Dash"></div>
    <div id="content">
    <h1>Heading 1</h1>
    <p>Content</p>
    </div>
    <div id="Footer">
    <p>Footer Content</p>
    </div>
    </div>
    </div>

CSS看起来如下，当我使用FireBug时，z-index不起作用，如果我从Contain css中删除背景颜色，我可以看到完整的图像，但我希望SideImage包含背景，Dash背景和页脚。我能想到的另一件事就是在SideImage Div上方设置一个Div，其白色背景颜色只是一个特定的宽度，并从Contain Div中删除背景颜色。有什么想法吗？

#Contain {
background-color: #FFFFFF;
margin: 0 auto;
position: relative;
text-align: left;
width: 850px;
z-index: 1;}

#Dash {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/dash.png");
float: none !important;
height: 10px;
position: absolute;
top: 169px;
width: 850px;
z-index: 2;}

#content {
border-left: 2px solid #C5DFF3;
border-right: 2px solid #C5DFF3;
float: left;
position: relative;
width: 846px;
z-index: 3;}
#Footer {
background-color: #C5DFF3;
clear: both;
height: 60px;
padding-top: 5px;
position: relative;
width: 850px;
z-index: 4;}

#SideImage {
background-image: url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png");
background-position: 85% top;
background-repeat: repeat-y;
position: relative;
z-index: 5;}

JSFiddle of code above

Answer 1

Z-index可能是一位善变的情妇。我通常采用内容渲染顺序来做这样的事情。基于上述标记和您的想法，我倾向于同意不可能将包含#SideImage的背景置于其任何内容的“顶部”。有关详细信息，请参阅Smashing链接中的图表。

如果您添加了元素<div id="SideFill" class="ir"></div>，则可以对css进行更改：

#SideImage {
  width:100%;
  position:relative;
}
#SideFill {
  position:absolute;
  width:15%;
  height:100%;
  top:0;
  right:0;
  background:transparent url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png") repeat-y 0 0;
}

Answer 2

好的，这是我最终在页面上找到HTML的地方。

<div id="Contain">
  <div id="SideImage" class="ir">&nbsp;</div>
</div>

对于我在

结束的CSS

#SideImage {
  background: url("/myLink/SideImage.png") repeat-y scroll 0 0 transparent;
  height: 100%;
  left: 748px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 30;
}

Answer 3

你意识到你想要背景图像，它应该在 BACK 中位于前面，对吗？在CSS中无法正常执行此操作。你需要一个<img>元素和你想要的图像，并使用高z-index固定/绝对定位。

提升内容背景图像

3 个答案: