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

【问题标题】：How to stop background layering with CSS?如何使用 CSS 停止背景分层？
【发布时间】：2011-05-05 06:18:45
【问题描述】：

我在<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 中现有的背景图片，而不是将其叠加在顶部？

【问题讨论】：

标签： iphone css safari firefox4

【解决方案1】：

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

【讨论】：

不，不起作用，它仍然在另一个图像之上绘制一个图像。

【解决方案2】：

您可以改用 CSS 精灵：

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

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

【讨论】：

它仍然在另一个之上。事实上，即使是 FF4 也使用您的代码来绘制它们。阻止它的方法是将background 快捷方式与background-image 和background-position 分开。但是，移动版 Safari 并不关心这两种方式，它总是一个图像在另一个图像之上。
如何分离类 button 和 button-disabled - 这样只有一个 CSS 选择器匹配
那是作弊，不是吗？ :)

【解决方案3】：

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

不过是一种中间解决方案。

【讨论】：