Question

我用于网站背景的图片正在定位到页面的中心。

我正在解释的截图如下：

Background image

为什么图像左右两侧的黑色空间出现？

以下内容的CSS是：

body {
background: black url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg')no-repeat 50% 100%;
}

Answer 1

您的背景图片看起来不够大，无法覆盖窗口大小。因此，您所提供的black背景颜色会出现在图片无法覆盖的区域。

我很想尝试以下方法：

body {
    background-image: url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg');
    background-position: center;
    background-size: cover;
}

这将确保您的背景图片覆盖HTML的body。更多信息can be found here。

Answer 2

首先，它是黑色的，因为在CSS中你指定黑色作为背景颜色。但我假设你的意思是为什么还有空白......

在这种情况下，简单的答案是图像的大小与窗口的大小不匹配。更具体地，分辨率和因此宽高比与窗口不同。因此，浏览器将根据您的CSS指令将图像居中，并使用您的实心基色（黑色）填充剩余的空间。

这里你基本上有3个选项。

您会找到适合空白区域的背景颜色以适应您的设计（很多人添加边框或将图像边缘淡化为透明，因此看起来很有目的）。
使用可重复的图像（这是最常见的步骤，因为它通常建议使用非常小的可重复图像而不是单个大图像。例如，您可能从一种颜色获得2000px图像渐变另一个可以水平重复（又称平铺）的。
使用background-size: cover属性来显示背景图像以完全覆盖您的身体标记。此属性可以设置为多个选项，但每个选项都有自己的警告（即奇怪的拉伸问题或在某些屏幕上裁剪重要部分）。因此，您需要谷歌搜索有效值并测试每个值。您还必须为此属性下载填充/填充以支持旧浏览器（IE？）。

Answer 3

看起来身体用于居中页面。因为身体和内容一样宽，这就是图像结束的地方。根html元素从正文中获取背景颜色，但不从图像中获取背景颜色。

作为一种解决方案，您应该考虑添加包装div以使页面居中，同时在主体上设置背景。

示例HTML

<html>
  <body>
    <div class="page"> ... </div>
  </body>
</html>

CSS示例

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: black url(...) no-repeat center top;
}

.page {
  width: 90%;
  margin: 0 auto;
}

Answer 4

在你的css中使用以下属性：

body {
background-size:cover;
}

或

body {
background-size:100%(for width) 100%(for height);
}

希望它会有所帮助。

背景图像重新定位

4 个答案: