出现在背景图像上的流氓白线

问题描述

  html {
 height：100％; 
 overflow：hidden; 
 background：url（'http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg'）无重复中心固定; 
 -webkit-background-size：cover; 
 -moz-background-size：cover; 
 -o-background-size：cover; 
 background-size：cover; 
} 
  

你好，兄弟。我一直在试图让这个可扩展的背景图片在这个网站上运行，但是这个麻烦的东西在左边有一个奇怪的流氓白线。

使用小提琴来了解问题的原因，确保将结果窗口拉到尽可能大的程度，以便您可以真正地看流氓行。这是什么造成的？

解决方案

这个问题似乎是一个缩放bug与 background-image



可以通过更改来修复：



  background：url（'http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg'）no-repeat center center fixed; b 
 
 
 
 
 
  background：url（'http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg'）no-repeat 0 0 fixed; 
  

所以这样做是改变 background-position 从 center center 到 0 0 。所以它将始终从左上角缩放，并且不会在边上留下空白（白线）。

现场演示：

html {
    height: 100%;
    overflow: hidden;
    background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Hello brethren. I've been trying to get this scalable background image to work on this website, but the facking thing has a weird rogue white line on the left hand side.

http://jsfiddle.net/49n73/1/

Use the fiddle to get an idea of the problem, make sure you pull the 'results' window as large as it can go so you can actually see the rogue line. What is causing this?

解决方案

The issue seems to be a scaling bug combined with the background-image being centre aligned.

It can be fixed by changing:

background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat center center fixed;

to this:

background:url('http://farm9.staticflickr.com/8345/8208481483_fc6b1bdf7d_h.jpg')no-repeat 0 0 fixed;

So what this does is change the background-position from center center to 0 0. So it will always be scaled from the top left and never leave a gap (the white line) at the side.

Live demo: http://jsfiddle.net/49n73/11/embedded/result/

这篇关于出现在背景图像上的流氓白线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！