在 HTML 或 body 上实现背景图片的最佳方式

Question

我有一个图像，我需要拉伸整个身体，所以我不知道最好的方法是什么

html{
  /*background image properties*/
}

要么

body{
  /*background image properties*/
}

原文由 Srackoveryflow_guy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

body{
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

这将是最好的方法，你可以将它应用到 HTML，这真的取决于你喜欢什么……

 background-image:url('../images/background.jpg');

假设您的 css 文件位于不同的地图中，您可以执行 ../ 转到放置 css 文件夹的地图，然后进入图像文件并选择图像。

 background-attachment:fixed;

在设置背景图像时，我个人喜欢使用它，这样当用户滚动时，背景图像会保持其当前位置。

 background-repeat: no-repeat;

使用此设置时，图像不会重复，以防图像太小或无法覆盖整个背景。

 background-size: cover;

当您应用它时，您将设置背景大小以覆盖，结合 no-repeat 和 attachment: fixed 它是设置背景图像样式的好方法

原文由 Gerwin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

根据此处的 CSS 2.1 规范：http: //www.w3.org/TR/CSS2/colors.html#background

但是，对于 HTML 文档，我们建议作者为 BODY 元素而不是 HTML 元素指定背景。对于根元素是 HTML“HTML”元素或 XHTML“html”元素的文档，其计算值“background-color”的“transparent”和“background-image”的“none”，用户代理必须使用在为画布绘制背景时从该元素的第一个 HTML“BODY”元素或 XHTML“body”元素子元素计算背景属性的值，并且不得为该子元素绘制背景….

因此， 建议 在 background 上使用 body （而不是在 html 上）。

如果您想要 background-image 拉伸整个容器（即 body ），那么您可以使用以下样式：

 background-size: 100% 100%;

如果要保留纵横比，则可以使用 cover 使其覆盖整个容器，或使用 contain 使其保持在容器边界内。当您使用 contain 时，根据背景图像的纵横比，您可能会在图像结束（信箱）下方或之后出现空白。

 background-image: url('...');
background-size: cover;
background-repeat: no-repeat;
...

.

原文由 Abhitalks 发布，翻译遵循 CC BY-SA 3.0 许可协议