迹忆客 专注技术分享

本篇文章将演示一些在 CSS 中居中背景图像的方法。

在 CSS 中使用背景属性使背景图像居中

我们可以使用不同的背景属性在 CSS 中将背景图像居中。

我们将使用诸如 background-image、background-repeat、background-attachment、background-position 和 background-size 之类的属性来居中背景图像。我们还可以使用 background 速记属性来定义这些不同的属性。

background-image 属性将使用 url() 函数设置图像。我们使用 background-repeat 属性来定义图像的重复行为。

background-attachment 属性定义了背景的固定或滚动行为。我们可以使用 background-position 属性设置背景的起始位置。

最后，我们可以使用 background-size 属性设置图像的大小。

例如，选择 CSS 中的 html 标签并应用样式。

首先，使用 background-image 属性设置背景图像。接下来，将 background-repeat 属性设置为 no-repeat。

然后，为 background-attachment 属性编写 fixed 选项。之后，将 background-position 属性应用到 center center 选项并将 background-size 属性应用到 cover。

在以下示例中，no-repeat 选项将防止图像重复。当背景图像尺寸较小时，图像将被复制为行和列。

当我们滚动页面时，背景图像将保持固定，因为我们为 background-attachment 属性使用了 fixed 选项。background-position 属性中的选项 center center 将图像水平和垂直放置在中心。

最后，cover 选项将调整图像大小以覆盖整个 html 容器。因此，我们可以使用 CSS 中的各种背景属性使背景图像居中。

示例代码：

html{
    background-image: url("/img/DelftStack/logo.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

在 CSS 中使用 width、height、left 和 top 属性将背景图像居中

在这个方法中，我们将讨论另一种在 CSS 中使用 width、height、left 和 top 等属性居中背景图像的方法。我们可以将高度和宽度设置为 100%，以便图像占据 body 标签的全部高度和宽度。

body 元素是 img 元素的父元素。我们可以使用 top 和 left 属性来设置背景图像到图像顶部和左侧元素的距离。

需要注意的是，这两个属性只有在设置了元素的 position 属性时才会起作用。

例如，选择 img 标签并将 width 和 height 属性设置为 100%。接下来，将 position 属性设置为 fixed。然后，将 left 和 right 属性设置为 0。

我们在 left 和 right 属性中使用 0 值，以在图像的顶部和左侧边缘与相邻元素不留空间。结果，图像将适合浏览器的视口。

通过这种方式，我们可以使用这些不同的属性来使 CSS 中的背景图像居中。

示例代码：

img {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

<div>
    <img src="/img/Jiyik/logo.png">
</div>