5

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

    <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 不起作用，如果我从包含 css 中删除背景颜色，我可以看到完整的图像，但我希望 SideImage 覆盖包含背景、短划线背景和页脚。我能想到的唯一另一件事是在 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

4

3 回答 3

1

好的，这就是我最终在页面上找到 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;
}
于 2013-01-07T19:42:07.850 回答
1

Z-index可以是一个善变的情妇。我通常会为这样的事情求助于内容渲染顺序。基于上述标记和您的想法，我倾向于同意将包含的背景#SideImage放在其任何内容的“顶部”是不可能的。有关更多信息，请参阅该 Smashing 链接中的图表。

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

#SideImage {
  宽度：100%；
  位置：相对；
}
#SideFill {
  位置：绝对；
  宽度：15%；
  高度：100%；
  顶部：0；
  对：0；
  背景：透明 url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png") 重复-y 0 0;
}
于 2012-12-28T19:28:29.573 回答
-2

css 的 background-image 属性用于将图像置于元素的背景。要将图像放入内容中或将图像提升到内容之上，请使用<img>标签。

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

于 2012-12-28T19:12:55.600 回答