다중 선택 자의 다중 배경색

여러 배경을 사용하는 이미지를 포함하는 CSS3 버튼을 만들려고합니다. 동일한 기본 스타일 (Twitter의 BootStrap CSS 프레임 워크 기반)을 사용하고 싶지만 클래스를 추가하여 다른 이미지를 적용하고 싶습니다.다중 선택 자의 다중 배경색

그래디언트를 기본으로 사용하고 여분의 클래스에 태그를 추가하여 이미지를 추가하고 싶습니다.

.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); 또는 무언가를) 여분의 배경을 지정하고 싶습니다 :이 같은 부트 스트랩에 btn CSS 클래스를 확장하여 하나 개의 버튼이 작업을 수행 할 수 있습니다. 계단식으로 추가 배경을 지정할 수있는 방법이 있습니까?

ASP.NET입니다. 따라서 원하지 않는 컨트롤 어댑터없이 슬라이딩 도어를 사용할 수 없습니다.

출처

2011-10-14 Echilon

'url (/images/edit_16.png)'이 없으면 공급 업체 프리픽스가 없습니까? – BoltClock

은 배경 이미지와 배경색을 분리합니다.

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

모든 CSS3 그라데이션 구문에 대해 이렇게하십시오.

출처

2011-10-15 03:00:34 rizqyhi

훌륭합니다. 감사합니다. 부트 스트랩과 함께 이것을 사용한다면 IE에서 이미지가 작동하도록 선언문에'filter : none'을 추가해야합니다. – Echilon

다중 선택 자의 다중 배경색

답변

관련 문제