5

OK、だから私がしたいのは、ページ上の他のすべての要素の上に表示する背景画像として設定したものです-右側に設定し、半分をコンテンツブロックに、半分を横に.. .現在、私は次の構造を持っています:

    <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

4

3 に答える 3

1

Z-indexは気まぐれな愛人になることができます。私は通常、このようなコンテンツのレンダリング順序に頼っています。上記のマークアップとあなたの考えに基づいて、コンテンツの背景を#SideImageそのコンテンツの「上」に置くことは不可能であることに同意する方向に傾いています。詳細については、その Smashing リンクの図を参照してください。

要素を追加した場合<div id="SideFill" class="ir"></div>、css に変更を加えることができます。

#SideImage {
  幅:100%;
  位置:相対;
}
#サイドフィル {
  位置:絶対;
  幅:15%;
  高さ:100%;
  上:0;
  右：0;
  background:transparent url("/23456jjsg886635kksjp/EQI/EQIImages/SideImage.png") repeat-y 0 0;
}
于 2012-12-28T19:28:29.573 に答える
1

OK、これが最終的にページの 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 に答える
-2

cssのbackground-imageプロパティは、要素の背景に画像を配置するために使用されます。コンテンツに画像を配置したり、コンテンツよりも画像を高くしたりするには、<img>タグを使用します。

後ろにあるはずの背景画像を前にしたいと思いますよね？CSSで通常それを行う方法はありません。必要な<img>画像を含む要素を用意し、高いz-indexで固定/絶対配置する必要があります。

于 2012-12-28T19:12:55.600 に答える