Google Chrome中的JQuery无法找到背景图片

时间:2009-03-04 03:57:29

标签: jquery google-chrome css

我有一个按钮,我想更改背景,以显示用户点击它时它被禁用。它在IE / FF中运行良好,但在Chrome中似乎无法找到背景图像并使背景无效。

alt text

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

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

5 个答案:

答案 0 :(得分:5)

好的,我已成功追踪问题。正如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>

答案 1 :(得分:1)

我要解决这个问题的方法是上课。为每个按钮状态都有一个单独的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...
});

答案 2 :(得分:1)

而不是“background-image”使用“backgroundImage”

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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