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

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

数据大屏

css设置背景图片和边框背景_第1张图片

 css设置背景图片和边框背景_第2张图片

(代码是react+ts,使用时请自行转换)

 一:设置页面背景图片

css设置背景图片和边框背景_第3张图片

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(
这里是工作台
) } export default ProductionBoard

二:设置边框的背景

css设置背景图片和边框背景_第4张图片

 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(
设置边框的背景
) } export default ProductionBoard

你可能感兴趣的:(umijs,React,Vue,css,前端,html)