一个快速生成元素背景的 React 组件

在开发过程中，我们经常会遇到使用背景的地方，比如登录页面，用户信息页面，封面图…… 寻找契合业务主题的背景十分耗费精力，总觉得做的背景不合适，如果直接用图片呢，逻辑是比较简单，但寻找到一张契合业务主题的图片也不是那么容易，所以想到用符号生成幕布一样的背景。

从这个出发点有了这个组件，滚动的图片墙可能这个需求比较常见，用 SmartBackground 可以很快速的实现。

安装完，以下是使用案例介绍

npm i smart-background -S

默认以圆点作为符号

import React from 'react';
import Background from 'smart-background';
import { FaLaugh } from 'react-icons/fa';
export default () => {return (<div style={styles.container}><Background underlayColor="#f00" animation={{ type: 'bottom', speed: 5 }}><div style={styles.content}><FaLaugh style={styles.icon} /><h1 style={styles.text}>JUST DO IT</h1></div></Background></div>);
};
const styles = {container: { width: '100%', position: 'relative', height: 350 },content: {width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',flexDirection: 'column',},icon: { color: '#fff', fontSize: 120 },text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },
};

Animation 动画

支持四个方向的滚动循环动画，可以控制速度 GPU rendering, Does not occupy the js process GPU 渲染, 动画不占用javascript线程

import React from 'react';
import Background from 'smart-background';
const symbols = ['乾','坤','震','巽','坎','离','艮','兑','天','地','雷','风','水','火','山','泽']
export default () => {return (<div className="container"><BackgroundunderlayImage='linear-gradient(to right, #434343 0%, black 100%)'symbolsStyle={{color:'rgba(255,255,255,0.8)'}}symbolSize={20}gap={20}animation={{ type: 'right', speed: 5 }}rotate={45}symbols={symbols}><div style={styles.content}><FaYinYang style={styles.icon} /><h1 style={styles.text}>乾坤</h1></div></Background></div>);
};
const styles = {container: { width: '100%', position: 'relative', height: 350 },content: {width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',flexDirection: 'column',fontWeight: 'bold',},icon: { color: '#fff', fontSize: 120 },text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },
};

Curtain 幕布

使用适当的实现可以很方便的实现一个图片幕布墙

import React from 'react';
import Background from 'smart-background';
export default () => {return (<div className="container"><BackgroundsymbolsStyle={{ opacity: 1 }}symbolSize={100}gap={0}symbols={[...images.map((img) => (<divstyle={{...styles.img,backgroundImage: `url(${img})`,}}/>)),]}animation={{ type: 'top', speed: 5 }}><div style={styles.content}>????<h1 style={styles.text}>Nice Image</h1></div></Background></div>);
};
const styles = {container: { width: '100%', position: 'relative', height: 350 },content: {width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',flexDirection: 'column',background: 'rgba(0,0,0,0.5)',fontSize: 120,},img:{width: '100%',height: '100%',backgroundSize: 'cover',transform: 'scale(1.2)',},text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },
};
const images = ['https://cdn.dribbble.com/users/3550736/screenshots/16244010/media/cead570591b124ed91c34dc9958f315c.jpg?compress=1&resize=1200x900','https://cdn.dribbble.com/users/3550736/screenshots/16244010/media/f03f7960c2d88f6fec3b43b9e1b5935b.jpg?compress=1&resize=1600x1200','https://cdn.dribbble.com/users/4666085/screenshots/16244479/media/d3d5b6d3e546fa17170b5daa46de375e.png?compress=1&resize=1200x900','https://cdn.dribbble.com/users/4588540/screenshots/16243929/media/430745b49a20f462bbfbdabc77b542f9.png?compress=1&resize=1200x900','https://cdn.dribbble.com/users/4835348/screenshots/16229715/media/5c68b55f75b04e96ff6f110ab2617996.png?compress=1&resize=800x600','https://cdn.dribbble.com/users/323673/screenshots/16223702/media/60b90d6e0f673e0ccee30056b8ae83d2.png?compress=1&resize=1200x900','https://cdn.dribbble.com/users/427857/screenshots/16157651/media/d8739d9147bb28ae6376e2206f67ba60.png?compress=1&resize=1600x1200','https://cdn.dribbble.com/users/427857/screenshots/16157651/media/18fcbf0c65cb47c14f633b162042cc65.png?compress=1&resize=1600x1200','https://cdn.dribbble.com/users/427857/screenshots/16157651/media/ecd0b4a299aabb66c8358b1051a139cd.png?compress=1&resize=1600x1200','https://cdn.dribbble.com/users/6532302/screenshots/16244413/media/c554d3e5bcf8c680ae56852b1b290fa7.jpg?compress=1&resize=1200x900','https://cdn.dribbble.com/users/2192147/screenshots/16242676/media/20f56e6b73bfc7ee4b9d9143f6449ad3.jpg?compress=1&resize=1200x900','https://cdn.dribbble.com/users/730703/screenshots/16207835/media/a9ad81cbcc73c87629471f4546828f2c.gif','https://cdn.dribbble.com/users/86429/screenshots/16241756/media/2d6331f16965e1ee4453b197e4d7f442.jpg?compress=1&resize=800x600','https://cdn.dribbble.com/users/5462867/screenshots/16165195/media/2a7203b0e3d1bbca91be7565d25d3f39.jpg?compress=1&resize=1200x900','https://cdn.dribbble.com/users/500242/screenshots/15428350/media/7b8a007e88d9050fe3d52c3625d2ff24.gif',
];

Exact 精确模式

使用精确模式，可以让元素固定在某一位置

import React from 'react';
import Background from 'smart-background';
import { FaApple } from 'react-icons/fa';
export default () => {return (<div className="container"><BackgroundsymbolsStyle={{ opacity: 1 }}exact={true}symbols={[...dots.map((dot) => (<divstyle={{position: 'absolute',width: dot.size,height: dot.size,borderRadius: dot.borderRadius,background: dot.background,top: dot.y,left: dot.x,}}/>)),]}><div style={styles.content}><FaApple /><h1 style={styles.text}>Apple</h1></div></Background></div>);
};
const styles = {container: { width: '100%', position: 'relative', height: 350 },content: {width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',flexDirection: 'column',fontSize: 120,},text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },
};
const dots = [{x: '-10%',y: '-20%',size: 200,background: 'linear-gradient(to top, #0ba360 0%, #3cba92 100%)',borderRadius: '50%',},{x: '60%',y: '40%',size: 500,background:'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)',borderRadius: '50%',},{x: '-30%',y: '50%',size: 450,background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',borderRadius: '50%',},
];

Random 随机模式

使用随机模式，可以让元素位置随机显示

import React from 'react';
import Background from 'smart-background';
import { Fa500Px,FaApple,FaAdobe,FaAdversal,FaAirbnb } from 'react-icons/fa';
export default () => {return (<div className="container"><Backgroundsymbols={icons}random={{fontSizeRange:[60,90]}}rotate={45}underlayImage='linear-gradient(to right, #ff0844 0%, #ffb199 100%)'><div style={styles.content}><FaApple style={{color:'#fff'}}/><h1 style={styles.text}>Apple</h1></div></Background></div>);
};
const styles = {container: { width: '100%', position: 'relative', height: 350 },content: {width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',flexDirection: 'column',fontSize: 120,},text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },
};
const icons = [<Fa500Px />,<FaApple />,<FaAdobe />,<FaAdversal />,<FaAirbnb />
]

Props

属性说明类型默认值是否必传
symbols元素/字符/符号集合(string | ReactNode | Element)[]['●']false
random符号是否随机生成位置和大小{ fontSizeRange: number[] } | undefined
false
underlayColor底衬颜色string
false
underlayImage底衬图片string
false
symbolsStyle符号样式React.CSSProperties{color: '#000',opacity: '0.3'}false
rotate符号旋转角度number0false
symbolSize符号大小number90false
gap符号间距number10false
animation滚动动画{ type: 'left' | 'right' | 'top' | 'bottom'; speed: number; }
false
childrenWrapClassName子组件容器类名string
false
childrenWrapStyle子组件容器样式React.CSSProperties
false

Tip 注意

Background 的高度默认继承父级元素，如果 Background 有 children，需要给 Background 的父级元素添加position:relative 属性

文章精选

前端如何进行日志驱动开发

微页面开发设计指南

【详细教程】教你如何使用Node + Express + Typescript开发一个应用

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python之路_前端基础之Bootstrap 组件

python之路_前端基础之Bootstrap 组件

文档内容参考地址&#xff1a;http://v3.bootcss.com/components/ 一、图标 如下例&#xff0c;Star文本前有一个空格&#xff1a; <button type"button" class"btn btn-default btn-lg"><span class"glyphicon glyphicon-star" aria-h…
阅读更多...
Java核心技术 卷1 多线程----线程安全的集合（4）

Java核心技术 卷1 多线程----线程安全的集合（4）

如果多线程要并发的修改一个数据结构&#xff0c;例如散列表&#xff0c;那么很容易会破坏这个数据结构。一个线程可能要开始向表中插入一个新元素。假定在调整散列表各个桶之间的链接关系的过程中&#xff0c;被剥夺了控制权。如果另一个线程也开始遍历同一个链表&#xff0c;…
阅读更多...
如何快速实现 Wordpress 博客域名更换？

如何快速实现 Wordpress 博客域名更换？

如题&#xff0c;如何快速更换使用 Wordpress 搭建的网站、博客的域名&#xff0c;除了在域名服务商那更换域名的解析和 web服务器端的配置外&#xff0c;还应该从数据库端做些什么&#xff1f;熟悉 Wordpress 的用户都知道在 Wordpress 后台&#xff0c;设置 --> 常规 里有…
阅读更多...
浮动—春联（文字竖直排列）

浮动—春联（文字竖直排列）

<div id"main"><div class"top">李白</div><div class"left">明月几时有</div><div class"right">把酒问青天</div> </div> 1 #main{2 height: 540px;3 …
阅读更多...
了解下广告计费模式CPC、CPA和CPM

了解下广告计费模式CPC、CPA和CPM

目前各大广告平台最常见的广告计费模式分别有CPC、CPA、CPM。例如知乎、头条、百度、腾讯等各类平台投放广告&#xff0c;基本都离不开这几种广告计费方式。由于博客流量日渐见好&#xff0c;最近也申请了谷歌的广告的流量主&#xff0c;所以有必要了解下这几种广告模式&#x…
阅读更多...
JUnit 5 –设置

JUnit 5 –设置

2015年11月&#xff0c; JUnit Lambda团队展示了他们的原型 。 此后&#xff0c;该项目更名为JUnit 5&#xff0c;并于2016年2月发布了Alpha版本。我们将在一系列简短文章中对其进行探讨&#xff1a; 设定 基本 建筑 条件 注射 … 本章讨论JUnit 5的设置&#xff0c;以便…
阅读更多...
如何在 VS Code 中创建自己的代码片段

如何在 VS Code 中创建自己的代码片段

在项目开发中&#xff0c;我们经常需要新建文件&#xff0c;而这些初始化这些文件又需要敲出很多相同的代码&#xff0c;比如我们新建一个 .vue 的文件&#xff0c;需要我们在写正式的功能代码之前&#xff0c;完成以下初始化代码&#xff1a; <script setup langts> &l…
阅读更多...
如何使用 Apifox 来管理测试你的接口

如何使用 Apifox 来管理测试你的接口

日常开发&#xff0c;你是使用 Postman 来测试接口&#xff0c;还是用接口文档生成工具 Swagger&#xff0c;最近发现了一个很好用的工具 Apifox&#xff0c;集API 文档、API 调试、API Mock、API 自动化测试功能为一体&#xff0c;兼客户端和 Web 端的强大的功能。 主要界面如…
阅读更多...
完善系统的最后一公里，增加系统日志功能

完善系统的最后一公里，增加系统日志功能

当我们在开发一个系统的时候&#xff0c;随着规划的功能越来越多&#xff0c;按照复杂度和稳定性相反的原则&#xff0c;为了保证系统能够按照我们设想的目标运行&#xff0c;我们需要对系统的运行状况进行监控。 那么什么时候介入监控比较好&#xff1f;在系统功能开发的前期…
阅读更多...
java泛型面试_Java泛型面试问题

java泛型面试_Java泛型面试问题

java泛型面试Java面试中的通用面试问题在相当长的时间内在Java 5周围越来越普遍&#xff0c;许多应用程序都转移到Java 5上&#xff0c;并且几乎所有新的Java开发都发生在Tiger&#xff08;Java 5的代号&#xff09;上。 泛型和Java 5功能&#xff08;例如Enum&#xff09;的重…
阅读更多...
Vue3 实现网页背景水印功能

Vue3 实现网页背景水印功能

经常有一些公司和组织出于系统文件或信息安全保密的需要&#xff0c;需要在系统网页上增加带有个人标识&#xff08;系统账号或个人信息&#xff09;的水印&#xff0c;可以简单防止截图外传首先我们来看这样一个水印功能的实现思路&#xff0c;通常是在我们原有的网页上附上一…
阅读更多...
部署微服务– Spring Boot fatjar到Amazon Elastic Beanstalk

部署微服务– Spring Boot fatjar到Amazon Elastic Beanstalk

最近&#xff0c;我正在研究概念验证的Web应用程序&#xff0c;我想将其部署到公共云以进行快速演示。 我决定使用Amazon&#xff0c;因为我已经有过使用它的经验。 亚马逊提供了几种不同的方式来部署Java Web应用程序。 EC2使我们可以灵活地在机箱上安装和配置任何我们想要的…
阅读更多...
在线答卷系统的前端设计与数据库系统的设计与实现

在线答卷系统的前端设计与数据库系统的设计与实现

如果要你实现一个在线的答题系统&#xff0c;你能想到它该具有哪些功能&#xff1f;当我接到这样一个需求的时候&#xff0c;脑海中立马能想到的就是它有录入题库的功能&#xff0c;创建试卷后可以从题库选择试题&#xff0c;并且可以针对试题进行分数的设置和排序。试卷发布后…
阅读更多...
jgroups传输消息_使用JGroups进行ElasticMQ消息复制

jgroups传输消息_使用JGroups进行ElasticMQ消息复制

jgroups传输消息ElasticMQ是一个消息服务器&#xff0c;具有Scala&#xff0c;Java和与Amazon SQS兼容的接口。 它通过跨服务器群集复制消息来支持有保证的消息传递&#xff0c;并通过日志记录实现消息持久性。 消息复制是ElasticMQ的核心功能之一。 但是&#xff0c;如果您看一…
阅读更多...
使用 Element 组件搭建在线学习的课程卡片设计

使用 Element 组件搭建在线学习的课程卡片设计

假如我们要做一个在线课程学习的系统&#xff0c;其中我们需要做的一个功能就是课程信息流的一个展示&#xff0c;以等高卡片列表或者瀑布流的方式呈现。首先我们来罗列下这个卡片内应该包括哪些信息点&#xff1a;课程名称课程简介分类信息课程评分等级课程文件课时观看学习人…
阅读更多...
12个很棒的Spring数据教程来启动您的数据项目

12个很棒的Spring数据教程来启动您的数据项目

Spring Data的任务是为数据访问提供一个熟悉且一致的&#xff0c;基于Spring的编程模型&#xff0c;同时仍保留基础数据存储的特​​殊特征。 它使使用数据访问技术&#xff0c;关系和非关系数据库&#xff0c;map-reduce框架以及基于云的数据服务变得容易。 这是一个总括项目…
阅读更多...
python多线程编程(3): 使用互斥锁同步线程

python多线程编程(3): 使用互斥锁同步线程

问题的提出 上一节的例子中&#xff0c;每个线程互相独立&#xff0c;相互之间没有任何关系。现在假设这样一个例子&#xff1a;有一个全局的计数num&#xff0c;每个线程获取这个全局的计数&#xff0c;根据num进行一些处理&#xff0c;然后将num加1。很容易写出这样的代码&am…
阅读更多...
如何防止水印被恶意删除或者隐藏？

如何防止水印被恶意删除或者隐藏？

继上篇 Vue3 实现网页背景水印功能 我们了解了常见的网页水印功能是如何实现的&#xff0c;懂原理的都知道水印是通过在网页中添加代码绘制 DOM 元素覆盖在原有的网页上而来的&#xff0c;一旦你打开浏览器中的元素审查&#xff0c;可以通过删除元素或者在元素的样式上操作属性…
阅读更多...
jmc线程转储_如何分析线程转储– IBM VM

jmc线程转储_如何分析线程转储– IBM VM

jmc线程转储本文是我们的线程转储分析系列的第4部分&#xff0c;它将为您提供什么是IBM VM的JVM线程转储以及您将找到的不同线程和数据点的概述。 您将看到和学习​​到&#xff0c;IBM VM Thread Dump格式是不同的&#xff0c;但是提供了更多现成的故障排除数据。 在这一点上&…
阅读更多...
Java 8：使用交替接口公开的类型安全地图生成器

Java 8：使用交替接口公开的类型安全地图生成器

动态展示您的课程 当我是Java新手时&#xff0c;我记得当时想过应该有一种方法可以删除或隐藏我不想公开的类中的方法。 就像用private方法或类似方法覆盖public方法一样&#xff08;哪种情况是不可能的&#xff0c;也不应该是不可能的&#xff09;。 显然&#xff0c;今天&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023