使用下半部分颜色和上半部分颜色创建div

Question

我有一个我要打成一个按钮。上半部分应为＃ffd41a，下半部分应为＃fac915。这是目前按钮的链接。 http://jsfiddle.net/WnwNW/

我面临的问题是我应该如何处理两种背景颜色。有没有办法做我想做的事情而不需要额外的div或跨度？我可以在同一个CSS类中有两个背景属性吗？

Answer 1

CSS3提供了一种方法

background-image: linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -o-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -moz-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -webkit-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -ms-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);

http://jsfiddle.net/WnwNW/1/

Answer 2

是和否。您可以使用两个背景属性。但是，这仅在CSS3中受支持。这意味着两个背景图像将在旧版浏览器中中断。话虽如此，你可以做这样的事情。

background-image: url(color1.png), url(color2.png);
background-position: bottom, top;
background-repeat: no-repeat;

我不确定你是否可以指定多种背景“颜色”。