제출 버튼의 배경 이미지가 작동하지 않습니다.

Question

양식 필드의 첫 번째 배경 이미지는 작동하지만 제출 버튼의 두 번째 이미지는 아무것도 수행하지 않습니다. & 버튼의 필드 스타일이 사용 중입니다.

내 CSS는 이것이다 :

form input { 
    background: url("images/text-field1.png") no-repeat scroll -5px 0 transparent; 
    font-size: 1em; 
    height: 17px; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    padding-left: 4px; 
    width: 311px; 
    margin-bottom: 5px; 
    margin-left: 40px; 
} 

form input .button1 { 
    background: url("images/submitbutton.png") no-repeat scroll -5px 0 transparent; 
} 

단추 1은 클래스 스타일 만 버튼이지만, 어떤 이유로 그것을 스타일링되지 않습니다.

Answer 1

아래 코드를 시도하십시오.

버튼 클래스 이름을 mybtn으로 지정하고 배경 이미지 스타일을 적용했습니다.

HTML

<input type="submit" name="submit" class="mybtn"/> 

CSS

input.mybtn { 
    background-image: url("http://subtlepatterns.com/patterns/symphony.png"); 
    font-size: 12px; 
    padding: 10px; 
} 

JSFIDDLE DEMO