Создайте div с нижней половиной одного цвета и верхней половиной другого цвета

Question

У меня есть кнопка, которую я собираюсь превратить в кнопку.Верхняя половина должна быть # ffd41a, а нижняя половина должна быть # fac915.Вот ссылка на кнопку в данный момент.http://jsfiddle.net/WnwNW/

Проблема, с которой я сталкиваюсь, заключается в том, как мне поступить с двумя цветами фона.Есть ли способ сделать то, что я пытаюсь сделать без необходимости добавления div или span?Могу ли я иметь два атрибута фона в одном классе 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;

Я не уверен, что вы можете указать несколько фоновых "цветов".