У меня есть кнопка, в которой я хочу изменить фон, чтобы показать, что он отключен, когда пользователь нажимает на него. Он отлично работает в IE/FF, но в хроме кажется, что он не может найти фоновое изображение и ничего не делает фоном.JQuery в Google Chrome не может найти фоновое изображение
Я просто делаю простой CSS набор в JQuery 1.2.6
$(".CheckoutBt").css("background-image", "url(/Portals/_default/images/buttons/checkout-end-disabled.gif)");
Ok я удалось отследить проблему. Как сказал tvanfosson, это потому, что WebKit не загружает изображения. Чтобы обойти эту проблему я просто загрузить оба изображения в unclicked классе
<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 (в настоящее время) поддерживает несколько фоновых изображений. – alex
так, как я бы решать это с классами. Имейте отдельные классы 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...
});
Я тоже пробовал с классами, и он делает то же самое. – Alex
Работает ли это, если класс «clicked» является классом по умолчанию, т. Е. Вы видите правильный фон? Просто пытаюсь сузить, является ли это заменой или фактическим изображением, вызывающим проблему. – tvanfosson
Если щелкнул по умолчанию, он отображает нажатые образы – Alex
Попробуйте полный "фон", "URL (/Portals/_default/images/buttons/checkout-end-disabled.gif) 0 0 не повторять".
Вместо «фонового изображения» использования «BackgroundImage»
Я хотел бы также предложить консолидировать все фоновые изображения в одно изображение like this. Затем вы используете смещения background-position для выполнения ваших эффектов опрокидывания. Вы можете использовать эту технику еще дальше, создав очень длинное изображение кнопки (как в обычном, так и в режиме опрокидывания), а влево и вправо выровнять его, чтобы создать «раздвижные двери».
Я также пробовал jquery 1.3.2, и это не имеет значения – Alex