使用umiJs搭建前端项目添加背景图片

1.找到路径

修改全局样式的文件名为 global.less，我们可以在浏览器界面使用 F12 打开检查元素窗口，找到对应布局的标签。由于 React 构建的是单页面应用，直接找 <div id='root'>...</div>下的标签，如下图所示，找到包含我们所展示的界面的组件的父标签。

 

2.找到该标签后，在global.less文件中使用类选择器，加入背景图的 url，示例代码如下：

// global.less
.ant-layout {
  background-image: url('./pages/Analysis/image/xiaoxin.png');
}

3.对于图片的设定-background

• background-color： 规定要使用的背景颜色。

• background-position： 规定背景图像的位置。

• background-size： 规定背景图片的尺寸。

• background-repeat ：规定如何重复背景图像。

• background-origin ：规定背景图片的定位区域。

• background-clip： 规定背景的绘制区域。

• background-attachment： 规定背景图像是否固定或者随着页面的其余部分滚动。

• background-image ：规定要使用的背景图像。

举例说明：

 background-position:10px center 水平方向上偏移右边10px，垂直居中
 background-position:center 50% 水平垂直都居中