本文最后更新于 801 天前,其中的信息可能已经有所发展或是发生改变。
直接上代码
App.jsx
import {Layout} from "@douyinfe/semi-ui";
import "./App.css";
function App() {
const {Header, Footer, Content} = Layout;
return (
<Layout className={"layout"}>
<div className={"background"}/>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
</Layout>
);
}
export default App;
App.css
.background{
width: 100vw;/*设置宽为屏幕宽度*/
height: 100vh;/*设置高为屏幕高度*/
position: fixed;/*固定位置*/
z-index: -1;/*置于下层*/
background-image: url("../public/枝江往事.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size:cover;
filter: blur(3px);
transform: scale(1.02);/*放大,去掉白边*/
}