css添加图片-如何在 HTML/CSS 中居中背景图像在 HTML/CSS 中，可以使用 background-position 属性将背景图像设置为居中，

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

只需将 “background-position：center” 添加到设置了背景图片的元素中;style，将背景图片设置为水平和垂直居中。

本教程操作环境：Windows 7系统，CSS3和HTML5版本，DellG3笔记本。

html/css 使背景图像居中的步骤

打开后端开发工具并创建新的 HTML 代码页

在 html 代码页上创建一个 div 标签来设置背景颜色，然后将 class=“bg-img” 添加到此标签中

设置背景图像。创建一个样式标签，然后在标签上设置 bg-img 类的背景图片，图像不重复，设置宽度和高度样式。样式代码：

.bg-img{
height: 100vh;
width: 100%;
background-image: url(img/car.jpg);
background-repeat: no-repeat;
}

保存 html 代码css添加图片，用浏览器打开它，您会注意到浏览器的背景图像显示在左上角。

返回到 html 代码页并将 background-position：center 样式添加到 bg-img 类中。

保存好HTML代码后css添加图片，再次刷新浏览器，你会发现浏览器的背景图片已经被手动居中了。

推荐教程：HTML视频教程，CSS视频教程

当我们使用

VSCODE，我们发现在CSS风格中，当选择器选择类名或ID名时，第一次调用需要自动输入，第二次调用可以手动提示，这使得开发过程非常不方便，下面我们用插件来解决这个问题，达到调用时手动提示的效果。

1.找到两个插件HTML到CSS自动完成行内css，大纲样式提示插件css类智能感知，内联样式提示插件

找到并单击右下角的安装进行安装

2. 安装后配置

2.1. 打开命令面板单击

右下角的设置，单击命令面板，或快捷键 Ctrl + Shift + P

2.2. 搜索 settings.json 配置文件

在搜索框中输入 settings.json

单击：首选项：打开设置 （JSON）。

2.3. 输入配置码

如图所示：

输入代码：

  "editor.parameterHints": true,
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    }

2.4、按Ctrl + S 点击保存

最后行内css，重新启动VSCODE以完美运行。