介绍一个网站,在这个网站里可以找到各种好看的背景图片和边框图片。
数据大屏
(代码是react+ts,使用时请自行转换)
一:设置页面背景图片
css部分
.productionBoard {
width: 100%;
height: 100%;
padding: 0 2rem;
box-sizing: border-box;
background-image: url("./background.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
z-index: -4;
}
index部分
import React from "react";
import styles from "./index.module.less"
const ProductionBoard: React.FC = ()=>{
return(<div className={styles.productionBoard}>这里是工作台</div>)
}
export default ProductionBoard
二:设置边框的背景
css部分
.cardItem {
width: 30%;
height: 200px;
color: #ffffff;
border: double white 1rem;
border-image: url("./border.png") 27 round stretch;
}
index部分
import React from "react";
import styles from "./index.module.less"
const ProductionBoard: React.FC = ()=>{
return(<div className={styles.productionBoard}>
<div className={styles.cardItem}>设置边框的背景</div>
</div>)
}
export default ProductionBoard