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

避坑记录

于 2023-07-27 14:02:19 发布

阅读量635

点赞数

分类专栏： umijs React Vue 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_44068262/article/details/131958428

版权

Vue 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

React

6 篇文章 0 订阅

订阅专栏

umijs

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在React应用中使用TypeScript来设置页面背景图片和边框图片。通过修改CSS样式，实现了背景图片全屏固定以及边框使用自定义图片并进行拉伸填充。

摘要由CSDN通过智能技术生成

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

数据大屏

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