html设置背景图片全屏-猿码集

HTML设置背景图片全屏

网页是由 HTML、CSS 和 JavaScript 组成的，而在这些技术中，CSS 负责网页的样式，包括颜色、字体、布局等。其中背景图片是网页中常见的一种样式。本文主要介绍如何使用 HTML 和 CSS 实现背景图片全屏。

使用 CSS 属性设置背景图片

使用 CSS backgroundImage 属性可以设置一个元素的背景图片，并且可以控制背景图片的位置和大小。


/* 设置背景图片，并且将图片居中 */
background-image: url("bg.jpg");
background-position: center;
background-size: cover;

其中，backgroundImage 属性用于指定背景图片的 URL。在这个例子中，我们使用了一张名为 "bg.jpg" 的图片。backgroundPosition 属性用于指定背景图片的位置。在这个例子中，我们将背景图片居中显示。backgroundSize 属性用于指定背景图片的大小。在这个例子中，我们使用了 cover 值，使得背景图片会被缩放到能够完全覆盖整个元素。

使用 CSS 实现全屏背景图片

要实现全屏背景图片，需要设置 HTML 和 body 元素的高度为 100%。


html, body {
  height: 100%;
}

然后，将背景图片设置为 body 元素的背景图片，并且将背景图片的大小设置为 cover：


body {
  background-image: url("bg.jpg");
  background-position: center;
  background-size: cover;
}

现在，背景图片将会被缩放到覆盖整个屏幕。但是，如果使用这种方法，背景图片可能会被拉伸，导致比例不正确。为了解决这个问题，可以使用 CSS3 中的 object-fit 属性。

使用 object-fit 属性

object-fit 属性可以控制图片在容器中的位置和大小，并且可以保持图片的比例。在下面的例子中，我们将图片的高度设置为 100%，并将 object-fit 属性设置为 cover：


body {
  background-image: url("bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
body::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}
.container {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

在这个例子中，我们还使用了伪元素来实现垂直居中，并且在下面的 .container 元素中添加了一些额外的样式，使得页面更具可读性。

结论

使用 HTML 和 CSS 可以轻松地实现全屏背景图片。使用 backgroundImage 属性可以设置一个元素的背景图片，并且可以控制背景图片的位置和大小。使用 object-fit 属性可以控制图片在容器中的位置和大小，并且可以保持图片的比例。

总之，结合两者的特点可以轻松地实现全屏背景图片。

html设置背景图片全屏