Назначить изображение кнопки ASP.net через класс CSS

Question

Я знаю, что могу использовать кнопки изображений для кнопок изображений.Но я хочу использовать CSS спрайты, чтобы уменьшить количество загружаемых изображений.Поэтому я хочу назначить нормальные кнопки для изображения через класс CSS.Но кажется, что он не работает.

Вот код и изображение, которое я пытаюсь

кнопка кодирует

    <asp:Button ID="btn1" CssClass="filter-tr" runat="server" />
<br />
<br />
<br />
<asp:Button ID="Button2" CssClass="filter-en" runat="server" />
<br />
<br />
<br />
<asp:Button ID="Button3" CssClass="flying" runat="server" />
<br />
<br />
<br />
<asp:Button ID="Button1" CssClass="fire" runat="server" />

здеськод класса css

    .filter-tr, .filter-en, .flying, .fire
{ display: block; background: url('images/image1.png') no-repeat; }

filter-tr { background-position: -0px -0px; width: 60px; height: 25px; }
filter-en { background-position: -0px -25px; width: 60px; height: 25px; }
flying { background-position: -0px -50px; width: 44px; height: 16px; }
fire { background-position: -0px -66px; width: 44px; height: 16px; }

но так он работает

.filter-tr {  display: block; background: url('images/image1.png') no-repeat;  background-position: -0px -0px; width: 60px; height: 25px; border-width:0px; }

Answer 1

Первое, что я хотел бы сделать, - установить фоновый URL-адрес для использования абсолютного местоположения:

.filter-tr, .filter-en, .flying, .fire
{ display: block; background: url('/images/image1.png') no-repeat; }

Без дополнительной информации это вся помощь, которую я могу предоставить.

Edit Должен был заметить это раньше.Все имена классов должны иметь . перед ними:

.filter-tr { background-position: -0px -0px; width: 60px; height: 25px; }
.filter-en { background-position: -0px -25px; width: 60px; height: 25px; }
.flying { background-position: -0px -50px; width: 44px; height: 16px; }
.fire { background-position: -0px -66px; width: 44px; height: 16px; }

Answer 2

Это работает

.filter-tr
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -0px;
        width: 60px;
        height: 25px;
    }
    .filter-en
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -25px;
        width: 60px;
        height: 25px;
    }
    .flying
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -50px;
        width: 44px;
        height: 16px;
    }
    .fire
    {
        display: block;
        background: url('images/image1.png') no-repeat;
        background-position: -0px -66px;
        width: 44px;
        height: 16px;
    }