问题：项目当中我们有的时候会遇到多个背景图片在一个地方展示的问题

当时项目比较急没有时间做工具函数，被团队优化以后有，时间进行工具函数编写

 技术： 插槽 ， 和 css 背景 这个还不是最终的状态 背景定位还有两个属性

子组件

// positioning:{left:{direction:"center"},right:{direction:"cneter"}
const BackgroundMounter = (props)=> {const BackgroundMounter = props.backGroundlet backGroundPost = ""let backGroundMessage = ""let backGroundSises = ""if(BackgroundMounter && BackgroundMounter.length > 0){BackgroundMounter.forEach((item,index) => {if(index +1 !== BackgroundMounter.length  ){backGroundMessage += `url(${item.URL})` + "no-repeat "  + ","backGroundSises += item?.style?.width + " " + item.style.height + ","backGroundPost +=  item.style.positioning.left.direction + " " +  item.style.positioning.right.direction + ","}else {backGroundMessage += `url(${item.URL})` + "no-repeat " backGroundSises += item?.style?.width + " " + item.style.height backGroundPost +=  item.style.positioning.left.direction + " " +  item.style.positioning.right.direction }});}  return(<div style={{background:backGroundMessage,backgroundPosition:backGroundPost,backgroundSize:backGroundSises}}>{props.children}</div>)
}
export default BackgroundMounter

父组件

backGround 

/* eslint-disable no-unused-expressions */
import React ,{ useEffect} from "react"
import {useState} from "react"
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import logincss  from './index.module.css'
import  Store from "../../Redux/redux";
import { BrowserRouter, Route, Routes,Link,Outlet,useNavigate} from "react-router-dom"
import UseClass from "./className";
import BackgroundMounter from "./BackgroundMounter";
const Log =  () => {const  usenavigate =  useNavigate()const backGround = [{URL:"https://pic2.zhimg.com/v2-abee0fc1e685e6ecad60cd507a9cf6b5_b.jpg",style:{width:"100px",height:"100px",positioning:{left:{direction:"center"},right:{direction:"center"}}}},{URL:"https://pic2.zhimg.com/v2-abee0fc1e685e6ecad60cd507a9cf6b5_b.jpg",style:{width:"100px",height:"100px",positioning:{left:{direction:"center"},right:{direction:"bottom"}}}}]//  userstate 功能进行数据的绑定舰艇 两个参数 第一个为数据第二个为函数形式的变化只有通过函数进行改动才能更新页面的数据let    [[form],setform] =  useState(Form.useForm())   const linitform =  {password:'123456',username:'wangchangzhou'}const login = () => {console.log("deng录")// eslint-disable-next-line react-hooks/rules-of-hooksusenavigate('/home',{state:{login:true}}) Store.dispatch({type:'login',login:true})}const valueSet = ()=> {const time = nullif(time){clearTimeout(()=> {})}setTimeout(()=> {console.log("KKKKKKK")})}const getValue = ()=> {}useEffect(()=> {//  console.log(useClass(logincss.login_bution,logincss.login_bution_BACK),"返回值")},[])const fundom = (value)=> {if(value ==="取消") {form.resetFields()}else {login()//   console.log(form.getFieldsValue());//  let value = form.getFieldsValue()//   console.log(linitform === value)//   // eslint-disable-next-line no-unused-expressions//      if(linitform.password == form.getFieldsValue().password && linitform.password == form.getFieldsValue().password ){//       login()//      }}}return(<>   {/* 背景挂载机 */}<BackgroundMounter backGround={backGround} ><div style={{height:"400px",width:"400px"}}>测试</div></BackgroundMounter>{/* <button className={UseClass(logincss.login_bution,logincss.login_bution_BACK)} onClick={getValue()}>1</button><button onClick={getValue()}>2jn   kkkkkkkkk</button> */}</>)
//        return(
//         <div className={logincss.log_box}>
//                 <Form
//                 form={form}
//                 className={logincss.log_box_from}
//                 name="normal_login"
//                 initialValues={{//       }}//     >
//       <div>
//           <span style={{fontSize:'20px',textShadow:'4px 4px 4px'}}>低代码测试</span>
//       <Form.Item
//       className={logincss.log_box_item}
//         name="username"
//         label ='名称'
//         rules={[
//           {
//             required: true,
//             message: 'Please input your Username!',
//           },
//         ]}
//       >
//         <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
//       </Form.Item>
//       <Form.Item
//        className={logincss.log_box_item}
//         name="password"
//         label ='密码'
//         rules={[
//           {
//             required: true,
//             message: '请输入密码',
//           },
//         ]}
//       >
//         <Input
//           prefix={<LockOutlined className="site-form-item-icon" />}
//           type="password"
//           placeholder="请输入密码"
//         />
//       </Form.Item>
//       {/* <Form.Item  className={logincss.log_box_item}>
//         <Form.Item name="remember" valuePropName="checked" noStyle>
//           <Checkbox>Remember me</Checkbox>
//         </Form.Item> */}
// {/* 
//         <a className="login-form-forgot" href="">
//            记住密码
//         </a>
//       </Form.Item> */}//       <Form.Item  className={logincss.log_box_item}>
//         <Button onClick={()=>{ return fundom('登陆') }} type="primary" htmlType="submit" className="login-form-button">
//           登录
//         </Button>
//         <Button onClick={()=>{ return fundom('取消') }} style={{marginLeft: '20px'}} type="primary" htmlType="submit" className="login-form-button">
//           取消
//         </Button>
//       </Form.Item>
//       </div>
//     </Form>
//     <Outlet></Outlet>
//         </div>
//        )
}
export default Log