平鋪兩個背景，無法在第一個平鋪圖像上方顯示文字

我的主要內容區域與標題（沙質棕色）重疊，我試圖在白色內容區域附近實現陰影。平鋪兩個背景，無法在第一個平鋪圖像上方顯示文字

我有四個圖像組成了該內容區域：頂部，底部，與99px的沙質棕色背景平鋪的部分（注意img中的空白區域）以及用白色背景以匹配頁面其餘部分的背景。

我遇到的問題是當我平鋪背景圖像，其中包含沙褐色的顏色和包含白色的背景圖像。正如您在附件中看到的，我希望文字向上移動。

我有我的HTML設置方式：

<div id="main-content"> 

<div id="content-header"></div> 
<div id="content-header-tile"></div> 
<div id="content"> 

    <div id="content-body"> 
    <p>Text here</p> 
    </div> 

</div> 
</div>

我沿着我能削減多少我div的使用

CSS的方式想象那些div的

#main-content { 
margin-top:-120px; 
margin-right:auto; 
margin-left:auto; 
height:500px; 
width:960px; 
background: url('..img/content_bg.png') repeat-y top left; 
} 

/* top of box, with drop shadow img */ 
#content-header { 
height:11px; 
background: #fff url('../img/content_header_bg.png') top left; 
width:960px; 
} 

/* tiles bg img with same sandy brown color as the header above, for 99px */ 
#content-header-tile { 
background: #fff url('../img/content_header_tile_bg.png') repeat-y top left; 
width:960px; 
height:99px; 
} 

/* begins tiling after 99px (after the div above is done tiling) */ 
#content { 
background: #fff url('../img/content_white_tile_bg.png') repeat-y top left; 
width:960px; 
} 

/* like #content-header, but this displays the bottom piece of the box */ 
#content-footer { 
height:12px; 
width:960px; 
background: #fff url('../img/content_footer_bg.png') no-repeat top left; 
}

enter image description here

來源

2012-02-23 Brad

這條規則：

#main-content {margin-top:-120px;}

是什麼移動你的白盒ontop的打火機但是並沒有讓你知道你在＃main-content（＃content-header和＃content-header-title）內有兩個div，加起來高度爲120px。

我相信，這將讓你更接近：

#content-body {margin-top:-120px;}

你有沒有考慮，雖然，只是使用CSS盒子陰影？ http://css-tricks.com/snippets/css/css-box-shadow/

來源

2012-02-23 21:53:35

我嘗試使用過濾器的盒子陰影，但我不能讓它在IE7中工作http://jsfiddle.net/vn3Hg/4/ – Brad 2012-02-24 13:27:10

一切都是一個折衷。爲了確保IE7獲得這種微小的美學改進，你會讓你的標記變得非常複雜，並且會耗費很多週期來計算它。所有這些對於一個瀏覽器來說，其市場份額約爲5％（並且下降）。 – 2012-02-24 13:34:10

我想我會使用框陰影樣式，我得到這個工作在IE7 http://stackoverflow.com/a/7841114/26130 – Brad 2012-02-24 14:38:28

另一種選擇也許是削減主要<div>節剩下3：

頭（棕......但是，頂邊的一角）
中間（白......這瓷磚的唯一部分）
頁腳（白色。 ..只有底部邊緣的頂端）

這樣，您的文本將接近該虛構的白色盒子的頂部......而不是被該額外的（棕色）瓷磚片推下來。

此外，還有大約從幾年像這樣的文章後面，如果我沒有記錯：http://www.alistapart.com/articles/fauxcolumns/

來源

2012-02-23 21:48:23 summea

平鋪兩個背景，無法在第一個平鋪圖像上方顯示文字

回答

相關問題