如何用 CSS 停止背景分层？
我在 上使用背景图像，使其看起来像一个按钮。所以我的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 中的现有背景图像，而不是将其分层在顶部？
I use background image on <input type="submit"> to make it look like a button. So I have the following in my CSS:
input.button {
background-image:url(/path/to/image.png);
}
Also, I want to show different image when button is disabled, the following CSS should do that:
input.button[disabled] {
background-image:url(/path/to/disabled/image.png);
}
The problem is, in iPhone browser that disabled image is drawn above the normal one, not instead of it.
I believe it is because CSS3 allows for multiple background images so Safari does it's best at drawing both of them. In fact, FF4 does the same if I use background instead of background-image. With the code as it is, however, FF4 draws it perfectly.
So, the question is, is there some way to replace existing background image in mobile Safari instead on layering it on top?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以将两个图像组合成一个更大的图像，并使用滑动门技术（使用背景位置在启用和禁用图像之间切换）。
You can combine both images into a larger one and use the sliding doors technique (using background position to switch between enabled and disabled images).
你可以使用 CSS-sprite 来代替：
You could use a CSS-sprite instead:
最后，我通过消除图像的透明度并将
opacity: 1添加到样式表（否则移动 Safari 由于某种原因使它们透明）解决了我的问题。不过，这是一种中间解决方案。
In the end I solved my problem by eliminating transparency from my images and also adding
opacity: 1to the stylesheet (otherwise mobile Safari made them transparent for some reason)Kind of intermediate solution though.