2013-01-21 140 views
0

我最近在最近的问题中发现了这个问题,这个问题与我认为是Chrome或Safari webkit的bug有关,也可能与我的style.css中的东西有关。不过,我注意到一段时间后,我的背景在调整大小时略有移动,并且我得出结论,当它向右移动时,左侧白色边框不会从屏幕左侧的顶部到底部显示,但是当背景图片向右侧移动,然后在左侧显示一个2px的白色边框。我该如何阻止边界移动。在调整大小时停止移动背景的CSS背景属性

我的CSS:

html { 
    background: url(/assets/fotball.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
+1

你可以创建一个jsFiddle吗? –

+0

http://jsfiddle.net/hB2h6/你去了,在页面的顶部,你可以看到一个随机出现的白色边框,如果你去链接:http://www.howtogeek.com/wp-content /uploads/2012/12/Plain-Black-Wallpaper.png你可以看到没有。如果看不到白色边框,请尝试调整JSfiddle页面的大小。 :) – MFCS

回答

0

试试这个:

background: url(/assets/fotball.jpg) no-repeat center top fixed; 
+0

没有工作:(。 – MFCS

+0

在小提琴它填满了所有空间没有显示边框,可能是在与其他控件(代码)的网页页面更改。你可以提供一些截图或链接来显示问题在视觉上? –

+0

以上以上以上... :) – MFCS

0

更改您的代码如下:jsFiddle Live Demo

html { 
    background: url(/assets/fotball.jpg) repeat center top fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-position:; 
} 

当您使用background-size: cover;,这都没有区别使用background:no-repeatbackground:repeat。所以在这种情况下,您可以使用repeat来解决您的问题。

+0

它确实删除了白色边框,但现在添加了一条绿色的线条,因为足球场是绿色的。而不是白线。更好,但仍不完美。 :(有更多想法吗? – MFCS

+0

@MFCS你可以上传你的背景图片吗?所以我可以看到发生了什么? –

+0

这里我正在测试的图片:http://us.123rf.com/400wm/400/400/piyato/ piyato1110/piyato111000037/10786305-football-on-grass-background.jpg – MFCS