CSS로 배경 레이어를 중지하는 방법은 무엇입니까?

Question

<input type="submit">에 배경 이미지를 사용하여 버튼처럼 보이게합니다. 그래서 난 내 CSS에 다음과 같은 한 : 또한

input.button { 
    background-image:url(/path/to/image.png); 
} 

, 나는 버튼이 비활성화되었을 때 다른 이미지를 표시하려면, 다음과 같은 CSS는 어떻게해야 : 문제는 아이폰 브라우저에서,

input.button[disabled] { 
    background-image:url(/path/to/disabled/image.png); 
} 

을 비활성화 된 이미지는 위의 위에 그려지는 대신 정상적인 이미지가 그려집니다. CSS3는 여러 배경 이미지를 허용하므로 사파리가 두 그림을 그릴 때 가장 좋습니다. 사실대신 background을 사용하면 FF4가 동일하게 작동합니다. 그러나 코드를 그대로 사용하면 FF4가 완벽하게 그립니다.

이동할 수있는 사파리 대신 위에 기존 배경 이미지를 바꾸는 방법이 있습니까?

Answer 1

을 (그렇지 않으면 모바일 사파리는 어떤 이유로 그들을 투명하게)

중간 용액의 종류.

Answer 2

두 이미지를 더 큰 이미지로 결합하고 슬라이딩 도어 기술을 사용할 수 있습니다 (배경 위치를 사용하여 사용 가능 이미지와 사용 불가능 이미지간에 전환).

당신은 대신 CSS-스프라이트 사용할 수

Answer 3

: 내 이미지에서 투명성을 제거하고 또한 스타일 시트에 opacity: 1를 추가하여 내 문제를 해결 결국

input.button { 
    background: transparent url(/p/2/img.png) no-repeat top left scroll; 
} 

input.button[disabled] { 
    background-position: bottom left; 
}