在 CSS 中居中背景图像

Subodh Poudel 2023年2月20日 2022年4月20日
  1. 在 CSS 中使用背景属性使背景图像居中
  2. 在 CSS 中使用 widthheightlefttop 属性将背景图像居中
在 CSS 中居中背景图像

本教程将演示一些在 CSS 中居中背景图像的方法。

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

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

我们将使用诸如 background-imagebackground-repeatbackground-attachmentbackground-positionbackground-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 中使用 widthheightlefttop 属性将背景图像居中

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

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

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

例如,选择 img 标签并将 widthheight 属性设置为 100%。接下来,将 position 属性设置为 fixed。然后,将 leftright 属性设置为 0

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

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

示例代码:

img {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}
<div>
    <img src="/img/DelftStack/logo.png">
</div>
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

相关文章 - CSS Background

相关文章 - CSS Image