Question

我对HTML5中的背景图片定位有疑问。我想将我的照片放在中央，但没有用。这是我在外部CSS文件中使用的代码：

body {
    background-image: url(logo.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

其他两个单词的命令也存在相同的问题（例如：“底部左；”）。语法很好（多次检查）并且仍然相同： problem_image

我不明白问题所在，请帮忙？！

Answer 1

简短回答：background-attachment: fixed

详细信息： CSS中的background-attachment属性指定如何相对于视口移动背景。

共有三个值：scroll，fixed和local。最好的解释方法是通过演示（尝试滚动各个背景）：

@import "compass/css3";

h2 {
  text-align: center;
  margin-top: 48px;
}

div {
  height: 200px;
  width: 50%;
  max-width: 600px;
  margin: 32px auto;
  overflow-x: hidden;
  overflow-y: scroll;
}

.scroll {
  background: url('http://lorempixel.com/600/200/animals');
  background-attachment: scroll;
}

.fixed {
  background: url('http://lorempixel.com/600/200/animals');
  background-attachment: fixed;
}

.local {
  background: url('http://lorempixel.com/600/200/animals');
  background-attachment: local;
}

.expand {
  height: 400px;
  width: 100%;
}

.extra-space {
  margin-bottom: 50px;
}

<h2><code>scroll (default)</code></h2>
<div class="scroll"><div class="expand"></div></div>

<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>

<h2><code>local</code></h2>
<div class="local"><div class="expand"></div></div>

<br class="extra-space">

在讨论背景附加时，有两种不同的视图需要考虑：主视图（浏览器窗口）和局部视图（您可以在上面的演示中看到）。

scroll是默认值。它与主视图一起滚动，但在本地视图中保持固定。

fixed保持不变。有点像物理窗口：在窗口中移动会改变您的视角，但不会改变窗口外的位置。

local的发明是因为默认滚动值的作用类似于固定背景。它同时与主视图和本地视图一起滚动。您可以使用它来完成一些非常酷的事情。

SOURCE

Answer 2

如果您向身体增加100vh的高度，背景就会居中，请检查以下代码段：

100vh-是视口的高度（网页的可见区域）

body {
  background-image: url(https://via.placeholder.com/150/0000FF/808080);
  background-repeat: no-repeat;
  background-position: center center;
  height: 100vh;
  margin: 0;
}

<html>
<body>

</body>
</html>

Answer 3

html和body元素是块级元素，就像div一样。如果没有明确设置高度，他们将仅假设其内容的高度，或者不包含任何内容时，其高度将为0。

因此，您需要将body元素的高度设置为与视口高度相同的大小才能实现目标。最好的方法是使用视口相对单位：

body {
  height: 100vh;
  background-image: url(logo.jpg) no-repeat center;
}

备用方法：

另一种方法是先将html 和 body的高度设置为100％

html,
body {
  height: 100%;
}

body {
  background-image: url(logo.jpg) no-repeat center;
}

您必须将其设置为两者，因为使用百分比单位时，body的高度是相对于html的高度。

Answer 4

您可以使用transform属性在中心设置图像。只需在CSS中调用图像类并编写此代码即可。

 .imgclass{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

这会将您的图像设置在身体中央。如果您使用的是引导程序，则只需在HTML图像类中编写align-self-center。

HTML-背景图片定位

4 个答案:

备用方法：