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

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

Проблема, с которой я сталкиваюсь, заключается в том, как я должен иметь дело с двумя цветами фона. Есть ли способ сделать то, что я пытаюсь сделать, без необходимости добавления divs или spanans? Могу ли я иметь два фоновых атрибута в одном классе CSS?

Ответ 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/

Ответ 2

Да и нет. Вы можете использовать два атрибута фона. Однако это поддерживается только в CSS3. Это означает, что в старых браузерах будут разбиты два фоновых изображения. При этом вы можете сделать что-то вроде этого.

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

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