Question

有没有办法为单个元素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;

Answer 1

使用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。

Answer 2

是，但仅限CSS3支持。否则，您必须在标记中使用DIV内的DIV作弊，并为每个DIV分配不同的背景。

Answer 3

不幸的是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;

另外，我建议你graceful degradation使用Modernizr代替旧IE：

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

另一种方法（我不喜欢）使用任何polyfill来强制IE6，IE7和IE8作为IE9工作。这可能导致问题，内存泄漏等等。

分配给DIV的多个背景

3 个答案: