Эта проблема сводит меня с ума, и я очень ценю любую помощь! По какой-то странной причине Chrome иногда не отображает фоновые изображения на сайте, который я недавно разработал. Я думаю, что это как-то связано с проблемой кеша в Chrome, и я попытался все исправления в других постах на этом сайте. Сайт отлично работает с Safari и Firefox на Mac ...
http://inkandpapermovie.com/
При нажатии на каждую кнопку «Смотреть», «О нас», «Создатели фильма», «Пресса», «Контакт» я использую jquery для постепенного перехода к каждому элементу Div и затемнения всех остальных элементов Div. Фоновое изображение для каждой страницы определено в моем файле CSS. Каждый div имеет свое собственное background-image: определенный URL, а также свойства, определенные для всех.
#watch, #story, #about, #cast, #filmmakers, #press, #contact {
position:absolute;
top:190px;
left:50%;
margin-left:-575px;
width:955px;
height:608px;
display:none;
}
#watch{
background-image:url(../images/bg-watch.png);
}
#about{
background-image:url(../images/bg-about.png);
}
#filmmakers{
background-image:url(../images/bg-filmmakers.png);
}
#press{
background-image:url(../images/bg-press.png);
}
#contact{
background-image:url(../images/bg-contact.png);
}
и javascript для определения кнопок исчезновения и затухания.
$(document).ready(function() {
$("a.watchBtn").click(function() {
$("#about").fadeOut();
$("#filmmakers").fadeOut();
$("#press").fadeOut();
$("#contact").fadeOut();
$("#inkguy").fadeOut();
$("#paperguy").fadeOut();
$("#centertext").fadeOut();
$("#watch").fadeIn();
});
$("a.aboutBtn").click(function() {
$("#watch").fadeOut();
$("#filmmakers").fadeOut();
$("#press").fadeOut();
$("#contact").fadeOut();
$("#inkguy").fadeOut();
$("#paperguy").fadeOut();
$("#centertext").fadeOut();
$("#about").fadeIn();
});
$("a.filmmakersBtn").click(function() {
$("#watch").fadeOut();
$("#about").fadeOut();
$("#press").fadeOut();
$("#contact").fadeOut();
$("#inkguy").fadeOut();
$("#paperguy").fadeOut();
$("#centertext").fadeOut();
$("#filmmakers").fadeIn();
});
$("a.pressBtn").click(function() {
$("#watch").fadeOut();
$("#about").fadeOut();
$("#filmmakers").fadeOut();
$("#contact").fadeOut();
$("#inkguy").fadeOut();
$("#paperguy").fadeOut();
$("#centertext").fadeOut();
$("#press").fadeIn();
});
$("a.contactBtn").click(function() {
$("#watch").fadeOut();
$("#about").fadeOut();
$("#filmmakers").fadeOut();
$("#press").fadeOut();
$("#inkguy").fadeOut();
$("#paperguy").fadeOut();
$("#centertext").fadeOut();
$("#contact").fadeIn();
});
});
Если кто-то может повторить эту проблему, пожалуйста, дайте мне знать. Все, что нужно, это обновить страницу и нажать на кнопки, чтобы она не работала на моем конце. На сайте возникла эта проблема даже после того, как я очистил кэш и протестировал его локально. В Dreamweaver это работает точно отлично. Еще одна странность в том, что элементы div загружаются правильно - например, кнопки ссылки, которые представляют собой png-файлы с тегами ... так что я знаю, что div-ы постепенно исчезают, но только не фоны!
Большое спасибо!