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最擅长绘制它们。事实上，如果我使用background而不是background-image，FF4也会这样做。但是，使用代码，FF4完美地绘制了它。

所以，问题是，是否有某种方法可以在移动版Safari中替换现有的背景图片而不是将其分层？

Answer 1

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

Answer 2

您可以使用CSS-sprite代替：

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会因某种原因使其透明）

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

如何使用CSS停止背景分层？

3 个答案: