0

我用于网站背景的图像被定位到页面的中心。

我正在解释的屏幕截图如下：

背景图片

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

以下内容的 CSS 是：

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

4 回答 4

4

您的背景图像似乎不足以覆盖您的窗口大小的空间。因此，black您还提供的背景颜色会出现在您的图像无法覆盖的区域。

我很想尝试以下方法：

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

这将确保您的背景图像覆盖body您的 HTML。更多信息可以在这里找到。

于 2013-10-02T07:55:14.987 回答
2

首先，它是黑色的，因为在您的 CSS 中，您将黑色指定为背景色。但是我假设您的意思是为什么根本没有空格...

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

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

  1. 您会找到适合空白空间的背景颜色以适合您的设计（很多人添加边框或将图像边缘淡化为透明，以便看起来有目的）。
  2. 您使用可重复的图像（这是最常见的步骤，因为通常建议使用非常小的可重复图像而不是单个大图像。例如，您可能有一个 2000px 的图像渐变从一种颜色到另一种颜色可以水平重复（又名平铺）。
  3. 使用background-size: cover属性突出背景图像以完全覆盖您的身体标签。该属性可以设置为多个选项，但每个选项都有自己的注意事项（即奇怪的拉伸问题或裁剪某些屏幕上的重要部分）。所以你需要谷歌搜索有效值并测试每一个。您还必须为此属性下载 shim/polyfill 以支持旧浏览器（IE？）。
于 2013-10-02T08:00:17.357 回答
0

看起来 body 用于使页面居中。由于正文与内容一样宽，因此图像结束。根html元素从正文中获取背景颜色，但不是图像。

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

示例 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;
}
于 2013-10-02T07:54:01.183 回答
0

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

body {
background-size:cover;
}

或者

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

希望它会有所帮助。

于 2013-10-02T07:56:42.227 回答