在 CSS 中居中背景图像
本教程将演示一些在 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/DelftStack/logo.png">
</div>
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