Smart Background

在开发过程中，我们经常会遇到使用背景的地方，比如登录页面，用户信息页面，封面图……

寻找契合业务主题的背景十分耗费精力，总觉得做的背景不合适，

如果直接用图片呢，逻辑是比较简单，但寻找到一张契合业务主题的图片也不是那么容易，

所以想到用符号生成幕布一样的背景，从这个出发点做了这个组件，

滚动的图片墙可能这个需求比较常见，用 SmartBackground 可以很快速的实现，

希望可以帮到您，别忘了 star 哟

An React Component Can Automatically Generate The Background

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

Live demo / Home page

https://yuanguandong.github.io/smart-background/

Install

npm i smart-background -S 

How to use

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' }, }; 

Props