陰影線與圖像作爲垂直分隔符btw DIV - 如何放置頂部和底部的圖像？

Question

我想在我的DIV之間有一條薄的「陰影」線作爲分隔符。由於我希望陰影線變得更細膩，頂部和底部的陰影更多，因此我創建了3個圖像：中間陰影，頂部陰影和底部陰影。問題：我不知道如何將「頂部陰影」圖像放置在底部（沒有多個DIV）的「中間陰影」和「底部」陰影的頂部。我在安裝完成煙花的圖像，你可以看到和榜樣的影子line.Many TKS的

div#content-center { 
    overflow: hidden; 
    background: khaki; 
    background: transparent url('images/middle_shadow.png') repeat-y top left; 
    padding: 0px 0px 0px 50px; 
} 

Answer 1

您可能也有與亞伯做到這一點:before和:after psedo-elements。 Read up on them here如果你不熟悉。

#content-center{ 
    background: url('images/shadow_repeat.png') center right repeat-y; 
} 

#content-center:before, 
#content-center:after{ 
    content:''; 
    display:inline-block; 
    position: absolute; 
    background-repeat: none; 

    /*size these to be what you need*/ 
    height:100px; 
    width:100px; 
} 

#content-center:before{ 
    top:0; 
    background-image: url('images/shadow_top.png'); 
} 

#content-center:after{ 
    bottom:0; 
    background-image:url('images/shadow_bottom.png'); 
} 

Answer 2

給多背景：

background: url('images/middle_shadow.png') top left, url('images/middle_shadow2.png') center left,url('images/middle_shadow3.png') repeat-y bottom left;