jquery - 谷歌浏览器中的 JQuery 找不到背景图片

Question

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

我只是在 jQuery 1.2.6 中设置了一个简单的 css

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

Answer 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>

Answer 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...
});

Answer 3

而不是“背景图像”使用“背景图像”

Answer 4

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

Answer 5

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