1

我在用着：

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 上本地测试了我的网站——都遇到了同样的问题。

我错过了什么吗？

4

3 回答 3

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%;
}

全屏小提琴

代码小提琴

于 2015-03-03T14:18:48.197 回答
1

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

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

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

这不是一个真正的解决方案，但可能看起来更好，并且会与浏览器的 chrome 融为一体。

于 2017-01-10T21:28:27.020 回答
0

尝试这个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;
}

还要检查你的图像可能是你的图像有一条线。

于 2015-03-03T12:47:07.300 回答