iphone - 如何使用 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 最擅长绘制这两个图像。事实上，如果我使用 FF4background而不是background-image. 然而，在代码原样的情况下，FF4 完美地绘制了它。

所以，问题是，有没有办法替换移动 Safari 中现有的背景图像，而不是将其分层？

Answer 1

您可以将两个图像组合成一个更大的图像并使用滑动门技术（使用背景位置在启用和禁用图像之间切换）。

Answer 2

您可以改用 CSS 精灵：

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

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

Answer 3

最后，我通过消除图像的透明度并添加opacity: 1到样式表来解决我的问题（否则移动 Safari 出于某种原因使它们变得透明）

虽然是一种中间解决方案。