这个问题让我非常抓狂,非常感谢任何帮助!出于某种奇怪的原因,Chrome 有时不会在我最近开发的网站上显示背景图片。我认为这与 Chrome 缓存问题有关,我已尝试在本网站的其他帖子中进行所有修复。该站点可以在 Mac 上与 Safari 和 Firefox 一起正常工作...
当单击“观看”、“关于”、“电影制片人”、“新闻”、“联系”的每个按钮时,我使用 jquery 淡入每个 div 并淡出所有其他 div。每个页面的背景图像都在我的 css 文件中定义。每个 div 都有自己定义的 background-image:url 以及为所有 div 定义的属性。
#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 正在淡入但不是背景!
非常感谢!
最佳答案
更新到最新版本的 Chrome!我使用的是 Chrome 18.0.1025.162,我不再遇到缺少图像的问题。 (假设您已允许 Chrome 自动更新,您可能已经更新到此版本)。
关于caching - CSS 背景图片间歇性地出现在谷歌浏览器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9439860/