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

news2024/11/15 13:43:36

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

数据大屏

 

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

高效梳理商业模式,3个免费的精益画布模板网站!

精益画布是一种能够帮助创业者快速开发商业模式的工具&#xff0c;它广泛应用于初创公司、企业创新、新产品发布等领域&#xff0c;并且精益画布可以帮助创业者系统地归纳商业模式&#xff0c;并从中找到新的商业机会。本文将向大家介绍3款免费的精益画布模板网站&#xff0c;这…

SFP3012-ASEMI快恢复二极管参数、规格、尺寸

编辑&#xff1a;ll SFP3012-ASEMI快恢复二极管参数、规格、尺寸 型号&#xff1a;SFP3012 品牌&#xff1a;ASEMI 芯片个数&#xff1a;2 芯片尺寸&#xff1a;102MIL*2 封装&#xff1a;TO-247 恢复时间&#xff1a;65ns 工作温度&#xff1a;-40C~175C 浪涌电流&am…

37.Vue生命周期-挂载流程

36.Vue引出生命周期_未来音律的博客-CSDN博客下面绿色框中的是Vue实例&#xff0c;红色框中的是具体的逻辑&#xff0c;而且最主要的是红色框中的还在操作绿色框中的数据。这是因为在定时器里&#xff0c;我们修改了data中的数据opacity&#xff0c;而Vue有这样的承诺&#xff…

MTK 进META的两种方式

1. Preloader进meta&#xff1a; 开机情况下&#xff1a;先发adb reboot meta进入Preloader&#xff0c;然后再进META 2. 开机后直接进meta

yolov5训练自己的数据集 以训练yolov5识别香烟为例

创建数据集目录 在YOLOv5根目录下创建mydata文件夹&#xff08;名字可以自定义&#xff09;&#xff0c;目录结构如下&#xff0c;将之前labelImg标注好的xml文件和图片放到对应目录下 mydata …images # 存放图片 …xml # 存放图片对应的xml文件 …dataSet #之后会在Main文件…

JAVA毕业设计091—基于Java+Springboot+Vue的宠物领养系统(源代码+数据库+14000字论文)

基于JavaSpringbootVue的宠物领养系统(源代码数据库14000字论文)091 一、系统介绍 本项目前后端分离 本系统分为管理员、用户两种角色 用户角色包含以下功能&#xff1a; 登录、注册、首页、宠物喂养、流浪宠物救助、宠物喂养点、丢失宠物查看、流浪宠物救助站、宠物论坛、…

Appium+python自动化(二十五)-获取控件ID(超详解)

简介 在前边的第二十二篇文章里&#xff0c;已经分享了通过获取控件的坐标点来获取点击事件的所需要的点击位置&#xff0c;那么还有没有其他方法来获取控件点击事件所需要的点击位置呢&#xff1f;答案是&#xff1a;Yes&#xff01;因为在不同的大小屏幕的手机上获取控件的坐…

实战项目——基于多设计模式下的同步异步日志系统

系列文章目录 1.项目介绍 2.相关技术补充 3.日志系统框架 4.代码设计 5.功能测试 6.性能测试 文章目录 目录 系列文章目录 1.项目介绍 2.相关技术补充 3.日志系统框架 4.代码设计 5.功能测试 6.性能测试 文章目录 前言 一、项目介绍 二、开发环境 三、核心技…

企业博客资讯如何高效运营起来?

运营一个高效的企业博客资讯需要综合考虑多个因素&#xff0c;包括内容策划、发布频率、优化推广、互动反馈等。下面将从这些方面介绍如何高效运营企业博客资讯。 如何高效运营企业博客资讯 内容策划 首先&#xff0c;需要制定一个明确的内容策略。确定博客的定位和目标受众…

亚马逊云科技纽约峰会,充分释放数据价值和生成式AI的潜力

生成式AI将深刻改变每个公司的运营方式&#xff0c;标志着人工智能技术发展的新转折点。亚马逊云科技昨日在纽约峰会上宣布&#xff0c;推出七项生成式AI新功能&#xff0c;进一步降低了生成式AI的使用门槛&#xff0c;让无论是业务用户还是开发者都能从中受益。借助这些新功能…

Packet Tracer – 使用 CDP 映射网络

# Packet Tracer – 使用 CDP 映射网络 ## 地址分配表 设备 接口 IP 地址 子网掩码 本地接口和互联邻居 Edge1 G0/0 192.168.1.1 255.255.255.0 G0/1 - S1 S0/0/0 S0/0/0 - ISP Branch-Edge S0/0/1 209.165.200.10 255.255.255.252 S0/0/1 – ISP Branch…

window下运行sh脚本/Linux命令

安装Git 首先找到git安装官方网址&#xff0c;Git的官方网址如下所示 https://git-scm.com/download/win 选择合适的Git版本安装即可。 一般一直点击install即可&#xff0c;注意环境变量的environment path的复选框点击。具体操作以及成果标志如下博客所示。 Windows 命令…

「VS」常见提示图标含义

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「VS」Visual Studio&#x1f4da;全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C」C/C程序设计「Win」Windows程序设计「算法」数据结构与算法「File」数据文件格式 目录 VS官网…

深入了解HTTP代理在网络爬虫与SEO实践中的角色

随着互联网的不断发展&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;成为各大企业和网站重要的推广手段。然而&#xff0c;传统的SEO方法已经难以应对日益复杂和智能化的搜索引擎算法。在这样的背景下&#xff0c;HTTP代理爬虫作为一种重要的工具&#xff0c;正在逐渐被…

金蝶云星空对接打通管易云物料查询接口与商品新增接口

金蝶云星空对接打通管易云物料查询接口与商品新增接口 数据源系统:金蝶云星空 金蝶K/3Cloud&#xff08;金蝶云星空&#xff09;是移动互联网时代的新型ERP&#xff0c;是基于WEB2.0与云技术的新时代企业管理服务平台。金蝶K/3Cloud围绕着“生态、人人、体验”&#xff0c;旨在…

java实现简单的购物车

文章目录 包含的功能增加商品删除商品修改商品购买数量展示商品 源代码Item.javaShoppingCart.java 包含的功能 增加商品 private static void addItem(ArrayList<Item> shoppingCartList, Scanner sc) {String id null;while(true){System.out.println("请输入商…

HTML <picture> 标签

实例 如何使用 <picture> 标签: <picture><source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg"><source media="(min-width:465px)" srcset="/i/photo/tulip.jpg"><img src="/i/ph…

难道真是小年?24浙大MBA项目报考形势研判:避开锋芒,逆势而行

还有几天时间&#xff0c;七月就过去了&#xff01;今年浙大MBA项目提前批面试还有最后六个批次&#xff1a; 但如果把区域便利性因素考虑进去&#xff0c;对于多数考生来说只有不超过三个批次的申请机会&#xff01;随着前面批次的面试完成&#xff0c;其实看得出来今年…

机器学习01 -Hello World(对鸢尾花(Iris Flower)进行训练及测试)

什么是机器学习&#xff1f; 机器学习是一种人工智能&#xff08;AI&#xff09;的子领域&#xff0c;它探索和开发计算机系统&#xff0c;使其能够从数据中学习和改进&#xff0c;并在没有明确编程指令的情况下做出决策或完成任务。 传统的程序需要程序员明确编写指令来告诉…

《Python高并发与高性能编程:原理与实践》——小解送书第六期

目录 书籍介绍 抽奖 书籍介绍 Python成为时下技术革新的弄潮儿&#xff0c;全民Python的发展趋势让人们不再满足于简单地运行Python程序&#xff0c;逐步探索其更为广泛的日常应用和高性能设计。以ChatGPT为代表的大模型产品对初级程序开发人员提出了挑战&#xff0c;要想在开…