배경 및 전경 이미지가 포함 된 버튼 만들기

Question

다음 작업을 수행하는 데 약간의 문제가 있습니다. CSS3이 처리하도록 설계되었는지 여부는 확실하지 않습니다. 나는 주위를 둘러 보았고 여러 배경 이미지가 지원된다는 것을 알았지 만 많은 예제를 시도해 본 결과 nada가되었습니다.

이 내 버튼을 렌더링하기 위해 기본 CSS 코드 :

.button { 
    background:#eee url(images/button.gif) repeat-x 0 0; 
    border:solid 1px #b1a874; 
    color:#7f7f7f; 
    font-size:11px; 
    padding:2px 6px 2px 6px; 
    cursor:pointer; 
    line-height:14px !important; 
} 

위의 코드는 괜찮 표준 버튼을 생성합니다. 하지만 이제는 인쇄 버튼과 같은 특정 버튼에 아이콘을 추가하고 싶습니다. 내 이미지가 버튼에 잘 맞는 사실 16 × 16에 볼 수 있듯이

input.Print { 
    background-image: url(../img/buttons/print.png); /* 16px x 16px */ 
} 

:

input.addImage { 
    background-repeat: no-repeat; /* once */ 
    background-position: 5px 2px; 
    padding-left: 16px;  
    vertical-align: middle; 
} 

그리고 : 나는 추가 CSS 클래스의 2 개 세트를 사용합니다. 그러나 원래 배경 이미지가 완전히 제거되어 배경색이 투명하게 유지됩니다.

가능한 경우 기본 사항을 간과하고 있으며이를 이해하는 데 도움이 될 것으로 확신합니다.

마지막으로 버튼에 대한 코드 :

<input type="button" class="button addImage Print" ... > 

이 당신의 귀중한 시간 주셔서 감사합니다.

Answer 1

당신은 CSS의 속성을 적용 할 때, 완전히 그 요소에 대해 이전에 정의 된 속성을 덮어 씁니다. 당신이해야 할 일은 다음과 같이 2 개의 배경을 요소에 적용하라는 것입니다 :

.button.Print { 
    background-image: url(images/button.gif), url(../img/buttons/print.png); 
} 

Answer 2

여러 배경은 동일한 CSS 클래스/요소 정의 내에서만 지원됩니다. 두 가지 배경을 모두 .button에 설정해야합니다.

.print에는 기본 배경이 너무 쉼표로 구분되어 있어야하고 print.png 아이콘이 있어야합니다.

편집

내 대답은 정말 분명하지 않다. 배경을 먼저 지정해야하며, 배경의 맨 위에 있어야합니다. 다음은 임의의 그림이 포함 된 예제 코드입니다.

데모 : http://jsfiddle.net/RzWfp/

.button { 
    background-image: url(http://www.myinkblog.com/wp-content/uploads/2009/02/background2.jpg); 
    border:solid 1px #b1a874; 
    color:#7f7f7f; 
    font-size:11px; 
    padding:2px 6px 2px 6px; 
    cursor:pointer; 
    line-height:14px !important; 
} 

.button-test { 
    background-image: url(http://www.famfamfam.com/lab/icons/silk/icons/feed.png), url(http://www.tutorial9.net/wp-content/uploads/2008/07/air-balloon-gradient.jpg); 
    background-position: left center, center center; 
    background-repeat: no-repeat; 
    padding-left: 20px; 
}