CSS 클래스를 통해 ASP.net 버튼 이미지 지정

Question

이미지 버튼에 imagebutton을 사용할 수 있다는 것을 알고 있습니다. 하지만 다운로드 한 이미지 수를 줄이기 위해 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, .filter-en, .flying, .fire 
{ display: block; background: url('/images/image1.png') no-repeat; } 

: 내가 할 것

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

Answer 1

이 디렉토리 구조에

.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; 
    } 

Answer 2

첫 번째 일은 절대 위치를 사용하는 배경 URL을 설정합니다.

편집 이전에 발견 했어야합니다. CSS를하다

는

.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; }