css3多重背景圖像 - 定位約束混淆

在CSS中，我們一直能夠利用塊模型的思想爲邊界，圓角等物體創建整個「頂部 - 中間（瓦）底部」效果。。例如..css3多重背景圖像 - 定位約束混淆

#top { background-image: url('some-top-image.jpeg'); } 
#middle { background-image: url('some-middle-image-that-tiles.jpeg') repeat-y; } 
#bottom { background-image: url('some-bottom-image.jpeg'); } 

<div id="top"></div> 
<div id="middle"><!-- tons of content here --></div> 
<div id="bottom"></div>

不是完全有效的代碼，但它無論如何說明了這個概念。

我想知道是否有辦法將這種邏輯封裝到CSS3的新功能中，以單一樣式完成多個背景圖像。這樣的..

.content { 
    background: 
      // top image - top positioning 
      // middle image - tiling, offset from top 
      // bottom image - bottom positioning 
} 
<div class="content"><!-- Lots of Content --></div>

我試圖只需鍵入的估計值，但它似乎不出來像我期望的那樣。我想知道是否有更多經驗的人可以啓發我是否可以做到這一點，以及是否有任何已知的例子。

來源

2011-09-18 Ciel

指定的頂部和底部的圖像和它們的位置，那麼中間的一個：

.content { 
    background: url('some-top-image.jpeg') top no-repeat, 
       url('some-bottom-image.jpeg') bottom no-repeat, 
       url('some-middle-image-that-tiles.jpeg') repeat-y; 
}

中間平鋪圖像的最後聲明，使頂部和底部的圖像將在它上面進行分層。自上而下完成多個背景圖像的分層。有關更多信息，請參閱背景和邊框模塊的§3.1 Layering multiple background images。

來源

2011-09-18 15:26:18 BoltClock

+1 ...什麼？哼哼......很好。但是，如果我們有透明/不透明的PNG圖像......這可能是一個問題，對吧？而且......我們是不是趕着這個極端的CSS3規範讓IE仍然在我們的後面呢？ –

@roXon：是的，那會有點問題。有一個小技巧，我在[這個答案]中描述（http://stackoverflow.com/questions/5427371/css3-multiple-background-images-and-a-background-color/5427455#5427455），可以使用取決於情況... – BoltClock

+2 .....：D CSS3變得如此強大。但是...... Bolt ......請記住，*「擁有強大的力量纔會帶來巨大的責任」*：D –

css3多重背景圖像 - 定位約束混淆

回答

相關問題