Как остановить фоновое наложение с помощью 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);
}

Проблема в том, что в браузере iPhone это отключенное изображение рисуется выше нормальным, а не вместо него. Я полагаю, что это потому, что CSS3 позволяет использовать несколько фоновых изображений, поэтому Safari делает все возможное, чтобы нарисовать их оба. Фактически, FF4 делает то же самое, если я использую background вместо background-image. Однако с таким кодом FF4 отлично рисует.

Итак, вопрос в том, есть ли какой-нибудь способ заменить существующее фоновое изображение в мобильном Safari вместо наложения его сверху?

Answer 1

Вместо этого вы можете использовать CSS-спрайт:

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

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

Answer 2

В итоге я решил свою проблему, убрав прозрачность с моих изображений, а также добавив opacity: 1 в таблицу стилей (в противном случае мобильный Safari сделал их прозрачными по некоторым причинам)

Вид промежуточного решения, хотя.

Answer 3

Вы можете объединить оба изображения в более крупное и использовать технику раздвижных дверей (используя положение фона для переключения между включенным и отключенным изображениями).