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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/47938.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

操作系统知识点总结

操作系统知识点总结: 第一章:操作系统概述 1.1操作系统的概念: ​ 操作系统是一种系统软件&#xff0c;与其他系统软件和应用软件不同&#xff0c;它有自己的基本特征。它的四大基本特征也就是并发&#xff0c;共享&#xff0c;虚拟&#xff0c;异步。 1.2操作系统的特征(四大…

智慧消防:如何基于视频与智能分析技术搭建可视化风险预警平台?

一、背景分析 消防安全是一个重要的话题&#xff0c;涉及到每个人的生活和安全。每年都会发生大量的火灾&#xff0c;给人们带来极大的危害&#xff0c;摧毁了大量的财产&#xff0c;甚至造成了可怕的人员伤亡。而消防安全监督管理部门人员有限&#xff0c;消防安全监管缺乏有…

垃圾回收之三色标记法(Tri-color Marking)

关于垃圾回收算法&#xff0c;基本就是那么几种&#xff1a;标记-清除、标记-复制、标记-整理。在此基础上可以增加分代&#xff08;新生代/老年代&#xff09;&#xff0c;每代采取不同的回收算法&#xff0c;以提高整体的分配和回收效率。 无论使用哪种算法&#xff0c;标记…

Gitlab服务器备份恢复及系统升级

居安思危&#xff0c;思则有备&#xff0c;有备无患。 基于此&#xff0c;申请了一个测试服务器&#xff0c;准备先安装同版本服务器&#xff0c;按照最新的数据进行恢复&#xff0c;然后再将现在的服务器升级到Gitlab的最新版本&#xff0c;记录一下完整的过程&#xff0c;以…

【第一阶段】varval类型推断

Val 可读不可改 代码示例&#xff1a; 不可改&#xff1a; fun main() {//val可读不可改val name:String"kotlin"//不可改 此时会报错 报错打印信息&#xff1a;Val cannot be reassignedname"java" }可读&#xff1a; fun main() {//val可读不可改val…

uniapp WIFI上下班打卡

大纲 &#x1f959; uniapp官网&#xff1a;uni-app官网 &#x1f959; WIFI功能模块&#xff1a; 1、下载 wifi 插件 uni-WiFi 2、在 manifest.json 中 App权限配置中 配置权限 1. ACCESS_WIFI_STATE &#xff08;访问权限状态&#xff09; 2. CHANGE_WIFI_STATE&#xff…

Qt 第三讲 手动拖动ui界面组件,事件处理机制,实现简单闹钟

手动拖动ui界面组件&#xff0c;实现闹钟 源文件 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);ui->btn_end->setEnabled(false);speecher new QTex…

flask结合mysql实现用户的添加和获取

1、数据库准备 已经安装好数据库&#xff0c;并且创建数据库和表 create database unicom DEFAULT CHARSET utf8 COLLATE utf8_general_ci; CREATE TABLE admin( id int not null auto_increment primary key, username VARCHAR(16) not null, password VARCHAR(64) not null…

【QT】Day1

1. 收到实现登录框 要求&#xff1a; 1、登录窗口更改标题、图标 2、设置固定尺寸、并给定一定的透明度 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> //信息调试类&#xff0c;用于打印输出的 #include <QIcon>…

【雕爷学编程】MicroPython动手做(02)——尝试搭建K210开发板的IDE环境2

知识点&#xff1a;Micropython的来历 MicroPython是英国剑桥大学的教授 Damien George&#xff08;达米安乔治&#xff09;所发明&#xff0c;Damien George 是一名计算机工程师&#xff0c;他每天都要使用 Python 语言工作&#xff0c;同时也在做一些机器人项目。有一天&…

出海周报|Temu在美状告shein、ChatGPT安卓版上线、小红书回应闪退

工程机械产业“出海”成绩喜人&#xff0c;山东相关企业全国最多Temu在美状告shein&#xff0c;跨境电商战事升级TikTok将在美国推出电子商务计划&#xff0c;售卖中国商品高德即将上线国际图服务&#xff0c;初期即可覆盖全球超200个国家和地区ChatGPT安卓版正式上线&#xff…

字典序排数(力扣)思维 JAVA

给你一个整数 n &#xff0c;按字典序返回范围 [1, n] 内所有整数。 你必须设计一个时间复杂度为 O(n) 且使用 O(1) 额外空间的算法。 示例 1&#xff1a; 输入&#xff1a;n 13 输出&#xff1a;[1,10,11,12,13,2,3,4,5,6,7,8,9] 示例 2&#xff1a; 输入&#xff1a;n 2 输…

【LeetCode】101.对称二叉树

题目 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false提示&#xff1a; 树中节点数…

pg三种插件验证

sr_plan 创建extension, 他会创建保留执行计划的表 创建表并插入数据 开启sr_plan.write_mode, 允许sr_plan收集SQL和执行计划 查看QUERY 1的执行计划 PostgreSQL支持merge join、GroupAggregate(通过INDEX SCAN)&#xff0c;所以这个CASE&#xff0c;非常快&#xff0c;并…

Dubbo 指定调用固定ip+port dubbo调用指定服务 dubbo调用不随机 dubbo自定义调用服务 dubbo点对点通信 dubbo指定ip

1. 在写分布式im时nami-im: 分布式im, 集群 zookeeper netty kafka nacos rpc主要为gate&#xff08;长连接服务&#xff09; logic &#xff08;业务&#xff09; lsb &#xff08;负载均衡&#xff09;store&#xff08;存储&#xff09; - Gitee.com&#xff0c;需要指定某一…

FANUC机器人SRVO-050碰撞检测报警和SRVO-053干扰值过大故障报警总结

FANUC机器人SRVO-050碰撞检测报警和SRVO-053干扰值过大故障报警总结 前面和大家分享了关于SRVO-050碰撞检测报警和SRVO-053干扰值过大的原因分析以及处理方法,感兴趣的朋友可以参考以下链接中的内容: FANUC机器人SRVO-050碰撞检测报警原因分析及处理对策

图书馆荐书《乡村振兴战略下传统村落文化旅游设计》

图书馆荐书《乡村振兴战略下传统村落文化旅游设计》 书名&#xff1a;乡村振兴战略下传统村落文化旅游设计 索取号&#xff1a;F592.3/47 作者&#xff1a;许少辉 简介&#xff1a;我国传统村落具有宝贵的历史价值、农业价值和生态价值等价值特色&#xff0c;在生动开展基于…

Android 通用带箭头提示窗

简介 自定义PopupWindow, 适用于提示类弹窗。 使用自定义Drawable设置带箭头的背景&#xff0c;测试控件和弹窗的尺寸&#xff0c;自动设置弹窗的显示位置&#xff0c;让箭头指向锚点控件的中间位置&#xff0c;且根据锚点控件在屏幕的位置&#xff0c;自动适配弹窗显示位置。…

vue项目开发环境和生产环境代理的配置问题

1.跨域 跨域解决方案&#xff1a; 1.JSONP 通过动态 script标签跨域 2.document.domain iframe跨域 3.location.hash iframe 4.window.name iframe跨域 5.postMessage 跨 window 通信 6.跨域资源共享&#xff08;CORS&#xff09; 7.nginx代理跨域 8.nodejs中间件代理跨域 9…

283. 移动零

题目 题解一&#xff1a; 反向收集不是0 的数字放到一个数组里面&#xff0c;用原数组大小减去收集数组的大小就是0 的个数 /*** 反向收集不是0 的数字放到一个数组里面&#xff0c;用原数组大小减去收集数组的大小就是0 的个数* param nums*/public static void moveZeroes(i…