css中怎么设置背景图片居中显示

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在 CSS 中,背景图片是一个常见的样式设置。但是,有时候你可能会发现背景图片没有在屏幕中央位置居中,而是靠左或者靠右对齐的。在本文中,我们将介绍如何使用 CSS 将背景图片在屏幕中央位置居中。首先,

在 CSS 中,背景图片是一个常见的样式设置。但是,有时候你可能会发现背景图片没有在屏幕中央位置居中,而是靠左或者靠右对齐的。在本文中,我们将介绍如何使用 CSS 将背景图片在屏幕中央位置居中。
首先,我们需要设置背景图片。这可以通过以下 CSS 代码完成:
body {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
} 

上述代码将 body 的背景图片设置为 image.jpg,并确保它不会被重复显示,同时将其缩放以填充整个屏幕。
要让背景图片在屏幕中央位置居中,我们需要使用以下代码:
body {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
} 

以上代码将背景图片的位置设置为屏幕的中央位置。
需要注意的是,我们使用 background-position 属性来控制背景图片的位置。 在背景图片的位置属性中,第一个值是水平位置,第二个值是垂直位置。使用关键字 center 来将背景图片在水平和垂直方向上都居中显示。
如果你想将背景图片向左或向右移动,可以使用负的或正的像素或者百分比值替代 center。
总结一下,使用 CSS 实现背景图片在屏幕中央位置居中显示很简单。你只需要将背景图片的位置属性设置为 center center。如果需要调整居中位置的话,可以使用不同的像素或百分比值替代 center 关键字。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么设置背景图片居中显示

粉丝

0

关注

0

收藏

0

已有0次打赏