Question

我有两个html页面（index.html和about.html），在body标签中具有相同的背景。我使用以下CSS来创建背景：

body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

但是，浏览器（Firefox和Chrome）无法正确定位图像。由于背景颜色为白色，因此index.html在背景图像下方有一条白线。我假设图像高度太短。

然而，在about.html的背景图片下面有一块空白区域，漂白超过四分之一的页面。

当我使用相同的CSS时，这是怎么发生的。

在这个主题上，管理不同屏幕分辨率的背景图像的最佳方法是什么？

Answer 1

尝试：

background-size:contain;

contain属性将图像缩放到最大尺寸，使其宽度和高度都可以放在内容区域内。

Answer 2

我更喜欢你首先通过photoshop拍摄一小片图像并将其保存为网页和设备，或者通过剪切工具拍摄一小部分图像。然后你会得到一个小尺寸的小图像。

比下面的代码

 body {
   background-image: url('http://www.skrenta.com/images/stackoverflow.jpg');
   background-repeat: repeat;
 }

Answer 3

我能想出的最佳解决方案是使用background-attachment: fixed;。这使我的图像充满了整个背景。

我还没弄清楚为什么我的CSS以不同的方式显示我的背景。这是值得关注的。

body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

CSS3背景随机剪切我的图像

3 个答案: