背景定位幫助 - 用陰影展開內容區域？

我正在研究內容區域上有一些基於圖像的陰影（不能使用CSS3，因爲它們不是簡單的陰影）的設計，該內容區域需要具有垂直靈活性。背景定位幫助 - 用陰影展開內容區域？

該設計具有白色內容區域，右上角有一個陰影，右下角有陰影，沿着底部邊緣可以看到網站上的所有內容。

爲了嘗試做到這一點，我創建了一個包裝來嘗試處理頂部陰影，然後將背景圖像應用到其中的主要內容區域的底部以處理底部陰影。然後我把背景變成了白色。我的想法是，無論它擴展多少，「底部」陰影圖像將始終堅持內容區域的底部，而白色將處理其餘部分。

問題是，陰影圖像顯然坐落在div內，並且沒有辦法讓它掛在容器外面......所以你可以see here它看起來很奇怪。

JSFiddle of the problem，你可以看到頂部的陰影看起來不錯，但最下面的一個坐在div內部，所以得到的背景顏色也被着色了。

我無法爲此解決這個問題。基本上坐在div內的陰影應該整齊地坐在它的外面。爲快速參考

HTML：

<div id="contentWrapper"> 
     <div id="content"> 
      <h1>HTML Ipsum Presents</h1> 
      <h2>Content in here</h2> 
     </div> 
</div>

CSS的包裝和內容領域：

#contentWrapper{ 
    background-image:url('../img/top-content.png'); 
    background-position:top right; 
    background-repeat: no-repeat; 
    width:820px; 
    margin-left:200px; 
} 


#content{ 
    background-image:url('../img/bottom-content.png'); 
    background-position: bottom right; 
    background-repeat:no-repeat; 
    background-color:#FFF; 
    width:802px; 
}

來源

2012-09-10 Francesca

你能不能做一個小提琴爲了我們？這讓它更容易陷入困境。 – thatidiotguy

對不起，我很習慣使用Chrome開發工具，我總是忘記：P Chekc回來幾分鐘，謝謝！:) – Francesca

完成:)任何幫助讚賞！ – Francesca

你可以使用multiple backgrounds：

#contentWrapper{ 
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top, 
     url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right; 
    width:820px; 
    margin-left:200px; 
}

演示：http://jsfiddle.net/Y2dSD/8/

編輯：

要解決的底部陰影，使用

演示：http://jsfiddle.net/Y2dSD/13/

但是，這是CSS3。如果你希望它在舊瀏覽器，添加一個新的容器：

HTML：

<div id="contentWrapper"><div> 
     <div id="content"> 
      <h1>HTML Ipsum Presents</h1> 
      <h2>Content in here</h2> 
     </div> 
</div></div>

CSS：

#contentWrapper{ 
    background:url("http://jamesperrett.co.uk/ightham/img/top-content.png") no-repeat right top; 
    width:820px; 
    margin-left:200px; 
} 
#contentWrapper>div{ 
    background:url('http://jamesperrett.co.uk/ightham/img/bottom-content.png') no-repeat bottom right; 
    padding-bottom:15px; 
}

演示：http://jsfiddle.net/Y2dSD/17/

來源

2012-09-10 22:00:46 Oriol

這固定了右下角的陰影，但底部邊緣沒有陰影。 – Francesca

@Francesca它工作？ – Oriol

背景定位幫助 - 用陰影展開內容區域？

回答

相關問題