Несколько фонов в нескольких селекторах

#asp.net #css #background-image

#asp.net #css #фоновое изображение

Вопрос:

Я пытаюсь создать кнопку CSS3, которая включает изображение с использованием нескольких фонов. Я хочу использовать тот же базовый стиль (основанный на фреймворке BootStrap CSS от Twitter), но применить другое изображение, добавив класс.

Я хочу градиент в качестве основы, а затем добавить изображение, пометив дополнительный класс. Я могу сделать это для одной кнопки, расширив btn класс css в bootstrap следующим образом:

 .btn.btnEdit 
{
    padding-left: 25px;
    background-color: #e6e6e6;
    background-repeat: no-repeat, no-repeat;
    background-position: 5px center, center center;
    background-image: url(/images/edit_16.png), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
    background-image: url(/images/edit_16.png), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
}
.btn.btnEdit:hover {
  background-position: 5px center, 0 -15px;
}

Но в идеале я бы хотел удалить шаблонный CSS и просто снова указать дополнительный фон (просто background-image: url(/images/edit_16.png), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); или что-то подобное). Есть ли способ указать дополнительные фоны путем каскадирования?

Это ASP.NET поэтому я не могу использовать раздвижные двери без управляющего адаптера, который мне не нужен.

Ответ №1:

разделите фоновое изображение и цвет фона. что-то вроде этого:

 background-image: url(/images/edit_16.png);
background-color:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);

сделайте это для каждого синтаксиса градиента css3.