将背景图像提升到内容之上

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 位于 Contain 背景、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

Answer 1

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

您意识到您希望本应位于BACK的背景图像位于前面，对吧？在 CSS 中没有办法正常地做到这一点。您需要有一个<img>包含所需图像的元素，并使用高 z 索引将其固定/绝对定位。