分配給DIV的多個背景

是否有將多個背景分配給單個元素DIV的方法。分配給DIV的多個背景

想法是在中間的直背景圖像的頂部和底部有圓角。

兩個圖像 -

cbmain.png有彎道和cbmains.png是直的圖像。它們都是透明的，我希望有一種方法可以在CSS中進行管理。

喜歡的東西::

background-top:url(example.com/images/cbmain.png) 960px 10px; 
background:url(example.com/images/cbmains.png) 960px; 
background-bottom:url(example.com/images/cbmain.png) 960px 10px;

來源

2011-05-09 Robin Knight

不幸的是multiple-background是一個CSS3的東西。我已經在IE9，Firefox，Chrome，Opera，Safari上測試並使用過它。您與CSS3語法的代碼會是這樣的：

background-image: url(example.com/images/cbmain.png), url(example.com/images/cbmain.png), url(example.com/images/cbmains.png); 
background-position: 960px top, 960px bottom, 960px top; 
background-repeat: no-repeat, no-repeat, repeat-x;

而且我用Modernizr對那些老IE建議你graceful degradation：

.no-multiplebgs #element { background: url(example.com/images/cbmains.png) 960px; }

另一種方法（我不喜歡）使用任何polyfill強制IE6，IE7和IE8作爲IE9工作。這可能會導致問題，內存泄漏等，等等等等。

來源

2011-05-09 15:11:47

是但只有CSS3支持。否則，您必須在DIV內的DIV中作弊，併爲每個DIV分配不同的背景。

來源

2011-05-09 15:00:49

正如我們在其他答案中所看到的，在標記中使用DIV內的DIV作弊並不是唯一的解決方案。也不是最好的。 – 2011-05-09 15:13:45

有了CSS3，你可以這樣做：

background-image: url(example.com/images/cbmain.png), url(example.com/images/cbmains.png); 
background-position: 960px 10px, 960px;

這將在Firefox 3.6 +，Chrome瀏覽器，Safari瀏覽器，IE9工作。對於較早版本的IE，您可以使用CSS3 Pie。

來源

2011-05-09 15:01:36

分配給DIV的多個背景

回答

相關問題