简介
@styled-system/background是一个基于Styled System的npm包，提供了制作背景图片的样式属性。该包的好处是可以让开发者更快的创建可重用的背景组件，同时也支持运行时性能高效的CSS-in-JS。
安装
要使用@styled-system/background包，请从npm包管理器安装它。请确保已经安装了styled-system。
npm install @styled-system/background styled-system
使用
@styled-system/background 将背景图形和一些CSS属性打包在一起，以便于您可以使用更简单的API快速创建多种类型的背景。
下面是一个示例，展示如何将@styled-system/background导入进项目。
import { Background } from '@styled-system/background';此包主要提供如下的四个属性：
- background
- backgroundImage
- backgroundSize
- backgroundPosition
-- -------------------- ---- -------
------ - ----------- ------------- ----- - ---- ---------------------------
------ - --- - ---- ----------
----- ------------- - -- -- -
----
-----
--------- -----------
------ ------
------- --------
------------- -----
----------- ------------------------- ----------
--------- --------
---
-----------
-----
---------------- -----------------------------------------------------------
--
------------
--
------
-在这个例子中，我们创建了一个带背景和具有圆角和溢出的盒子。接下来，在此盒子内容的后面，我们还展示了如何使用@styled-system/background提供的属性提供背景图片、背景大小和背景位置。
结论
@styled-system/background使创建背景组件变得更简单并且易于使用。可以访问该库的Github页面，以便于您了解更多关于它怎么工作的细节，并且可以看到更多的API和额外的使用示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc698b5cbfe1ea0612254