在開發過程中，我們經常會遇到使用背景的地方，比如登錄頁面，用戶信息頁面，封面圖…… 尋找契合業務主題的背景十分耗費精力，總覺得做的背景不合適，如果直接用圖片呢，邏輯是比較簡單，但尋找到一張契合業務主題的圖片也不是那么容易，所以想到用符號生成幕布一樣的背景。

從這個出發點有了這個組件，滾動的圖片墻可能這個需求比較常見，用 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	符號旋轉角度	number	0	false
symbolSize	符號大小	number	90	false
gap	符號間距	number	10	false
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開發一個應用

總結

以上是生活随笔為你收集整理的一个快速生成元素背景的 React 组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。