谷歌浏览器中的 JQuery 找不到背景图片答案

【问题标题】：JQuery in Google Chrome can't find background image谷歌浏览器中的 JQuery 找不到背景图片
【发布时间】：2010-10-11 04:26:05
【问题描述】：

我有一个按钮，我想更改它的背景以显示当用户单击它时它被禁用。它在 IE/FF 中运行良好，但在 chrome 中似乎找不到背景图像并且背景没有。

我只是在 jQuery 1.2.6 中做一个简单的 css 集

$(".CheckoutBt").css("background-image", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif)");

【问题讨论】：

我也试过 jquery 1.3.2 并没有什么不同

标签： jquery google-chrome css

【解决方案1】：

好的，我已经设法找出问题所在。正如 tvanfosson 所说，这是因为 WebKit 没有下载图像。为了解决这个问题，我只需在未点击的类中加载两个图像

<style>
.unclicked {
 background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
 background-image: url('/Portals/_default/images/buttons/checkout-end.gif');
}
.clicked {
   background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
}
</style>

【讨论】：

这也很方便，因为只有 WebKit（当前）支持多个背景图像。

【解决方案2】：

我解决这个问题的方法是使用课程。每个按钮状态都有一个单独的 CSS 类，然后只需使用 jQuery 来更改按钮的类。这将确保在您设置类时所有图像都已实际下载并可用——我认为这是 Chrome 失败的地方（可能所有 WebKit 浏览器都会这样做）。

<style>
.unclicked {
 ...
}
.unclicked :hover {
 ...
}
.clicked {
   background-image: url('/Portals/_default/images/buttons/checkout-end-disabled.gif');
}
</style>
...
$(".CheckoutBt").click( function() {
    $(this).removeClass('unclicked').addClass('clicked');
    ...do what ever action...
});

【讨论】：

我也尝试过使用类，它做同样的事情。
如果“点击”类是默认类，它是否工作，即，你看到正确的背景，然后？只是试图缩小是导致问题的替换图像还是实际图像。

【解决方案3】：

使用“backgroundImage”代替“背景图像”

【讨论】：

【解决方案4】：

尝试完整的“背景”、“url(/Portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 no-repeat”。

【讨论】：

【解决方案5】：

我还建议将您的所有背景图像合并为一个图像like this。然后你使用background-position 偏移来做你的翻转效果。您可以通过制作一个非常长的按钮图像（其中包含正常和翻转状态）并左右对齐来生成您的“滑动门”，从而进一步利用此技术。

【讨论】：