css设置背景图片和边框背景

介绍一个网站，在这个网站里可以找到各种好看的背景图片和边框图片。

数据大屏

 

（代码是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