Question

我正在使用：

body {
  background:url('../img/wide.jpg') center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 10%;
  color: #fff;
}

但是，浏览器右侧有一条小1px行似乎无法覆盖。我在Opera，FF Dev和Chrome上本地测试了我的网站 - 所有这些都有同样的问题。

我错过了什么吗？

这是右侧的样子（坏）：http://i.imgur.com/IO2oJkj.png
这是左侧的样子（好）：http://i.imgur.com/54EFfgI.png

Answer 1

我在解决方案中看到的唯一一个栏是浏览器窗口周围的1px笔划，不确定这是否是您尝试消除的内容。

html{
margin: 0;
padding: 0;
}

body{
background: url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg') center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 10%;
color: #fff;
padding: 0px;
margin: 0 auto;
width: 100%;
}

Full Screen Fiddle

Code Fiddle

Answer 2

我的猜测是，这是一个浏览器绘制错误，因为容器的大小落在像素之间。如果容器没有设置精确的像素宽度，但使用百分比之类的东西（或者如果您在浏览器中放大或使用视网膜显示器），那么它可能会碰到像素的边缘并在向上舍入时绘制框，并在绘制背景图像时向下舍入。可能值得向浏览器供应商提交错误报告。

解决方法是提供插入框阴影（而不是常规边框）。 1px的插入边框将与背景图像重叠（而边框只会使背景图像从每个方向推入1px）。由于它是一个子像素浏览器绘画问题，你的怪异边框永远不会超过1px。

box-shadow: inset 0px 0px 0px 1px gray;

不是真正的解决方案，但可能看起来更好，并且会融入浏览器的chrome。

Answer 3

试试这个background-size: 100%;

body {
  background:url('../img/wide.jpg') center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  padding-top: 10%;
  color: #fff;
}

同时检查你的图像可能是你的图像有一条线。

background-size在浏览器右侧留下一个像素行

3 个答案: