在调整大小时停止移动背景的CSS背景属性

我最近在最近的问题中发现了这个问题，这个问题与我认为是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; 
}

来源

2013-01-21 MFCS

你可以创建一个jsFiddle吗？ –

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

试试这个：

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

来源

2013-01-21 12:08:52

没有工作:(。 – MFCS

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

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

更改您的代码如下：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-repeat或background:repeat。所以在这种情况下，您可以使用repeat来解决您的问题。

来源

2013-01-21 14:13:32

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

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

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

在调整大小时停止移动背景的CSS背景属性

回答

相关问题