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% 水平垂直都居中