Chrome CSS背景图片显示为白色区域

时间:2012-07-27 07:14:15

标签: css image google-chrome background

我有一个神秘的(至少对我来说)css背景图片问题,我只遇到了Google Chrome。我发现了类似的主题,但不像那些,这里没有涉及Javascript,JQuery或其他任何东西,它是纯CSS。它只是不能正常工作。

如果打开页面www.bodrogietterem.hu,背景图像应该低于整个内容区域(就像在其他浏览器中一样)。在Chrome中,会出现水平和垂直的白色区域。

一旦你开始滚动,背景图像就显得一切正常,从那时起它就会保持不变。同样,当您使用inspect元素打开开发工具时,背景图像会立即存在,并且也会保留在那里。

这是相关的css:

body.page-node-1  div#main{
background:#FFFFFF url('/sites/all/themes/bodrogietterem/images/bodrogi_bodrogi.jpg') bottom;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 135px;
padding-bottom:0px;
margin-bottom:0px;
}

并附上两个关于它看起来如何的屏幕抓取,以及它应该是什么样的(好吧,我不允许附加这些,作为一个新用户,但看看这里:

http://www.bodrogietterem.hu/chrome_issue.JPG

在这里

http://www.bodrogietterem.hu/should_look_like.JPG

它也发生在子页面上,但我认为问题的根源必须相同。

我正在使用Vista,使用最新的Chrome(20.0.1132.57),以及最新的其他浏览器。顺便说一句,第二张截图也是在Chrome中拍摄的,但在打开开发工具后

非常感谢你的帮助, 最好成绩, 泽索特

4 个答案:

答案 0 :(得分:0)

Chrome的最新版本为21.0 ...因此请尝试更新Chrome浏览器并查看最新版本是否正常。屏幕截图会导致404错误页面,因此请尝试重新上传屏幕截图。

我还检查了IE7,IE8,IE9中的页面,所有3页的页面看起来都不错,IE7却在底部显示了一个水平滚动条,但背景图片看起来还不错。

答案 1 :(得分:0)

您的页面在Windows 7(Chrome 20.0.1132.57)中的Chrome浏览器中看起来很不错

过去我遇到过一些问题,其中安装的各种工具栏/插件会干扰页面上的CSS,这显然会导致Chrome在孤立事件中出现错误。尝试运行chrome而不安装插件/ plgins并查看它是否能解决您的问题。

对CSS的一个观察:#content包含未清除的浮动元素。我不认为这是问题,但可能与上述情况混在一起。

让我知道这是否有帮助。

答案 2 :(得分:0)

感谢您的有益想法,我终于设法解决了这个问题。

在摆弄时,我测量了白色区域的高度,结果是135px(这正是上面CSS中背景的顶部位置)。所以我决定,无论出于何种原因,该属性导致问题,我是对的。

作为一个快速而肮脏的解决方案,我在背景图像的顶部添加了135px的白色区域,并将background-position属性的顶部设置为0px - 这立即解决了问题。

对于垂直白色区域,它是通过将背景图像绑定到#main-wrapper div而不是#main div(它是Drupal 7 build)来解决的。同样,我不知道为什么,但它立即修复了问题。

我喜欢,网络应该如何精确和合乎逻辑,并且有时仍然保持随机和临时

再次感谢你的时间和精力,最好的, 泽索特

答案 3 :(得分:0)

有两页http://www.stoerbeton.nl有同样的问题,但我想在阅读完上述帖子和一些想法后我解决了这个问题。

问题可能在于一般背景:url;网站css的属性和加载。我取代了所有的一般背景:#222222 url repeat etc。;用于背景图像:; ,background-repeat :;和背景颜色:;等。

如果您的网站在编辑完CSS后工作,请告知我们。我还在测试。

Greets,aquaster.nl