背景设计对于增强 web 应用程序的视觉吸引力至关重要。最通用且最具视觉吸引力的图案是网格和点。 tailwind css 凭借其强大的实用程序类，使创建这些模式既简单又高效。在本文中，我们将探索如何使用 tailwind css 创建网格和点背景，并提供分步指导和实际示例。
创建网格背景
网格背景是使用线性渐变结合 tailwind css 中的 bg-[size] 属性创建的。以下是实现这一目标的方法：
{/* grid background */} <div class="absolute -z-10 inset-0 h-full w-full bg-[linear-gradient(to_right,#73737320_1px,transparent_1px),linear-gradient(to_bottom,#73737320_1px,transparent_1px)] bg-[size:20px_20px]" />
bg-[linear-gradient(…)]: 定义两个线性渐变，一个用于垂直线，另一个用于水平线。
bg-[size:20px_20px]: 将网格单元格大小设置为 20px x 20px。
-z-10：将网格背景置于内容后面。
然后让我们在组件中实现它
<div class="relative min-h-screen flex flex-col items-center justify-center"> <div class="w-[70%] mx-auto text-center"> <h1 class="text-[3rem] font-bold text-neutral-950"> lorem ipsum dolor sit amet. </h1> <p class="text-[1rem] text-neutral-800"> lorem ipsum dolor sit amet, consectetur adipisicing elit. recusandae, eligendi dolore? atque labore odio soluta amet, rem aspernatur veniam molestias repellendus maiores harum magni! eius aut nihil cum sunt sequi? </p> </div> {/* grid background */} <div class="absolute -z-10 inset-0 h-full w-full bg-[linear-gradient(to_right,#73737320_1px,transparent_1px),linear-gradient(to_bottom,#73737320_1px,transparent_1px)] bg-[size:20px_20px]" /> </div>
为了使网格背景正确定位并位于其他元素后面，父容器必须具有相对类。这确保背景尊重父组件的边界。
它看起来像这样：
创建点背景
使用 tailwind css，您可以使用径向渐变来实现这种效果。以下是实现点背景的方法：
{/* dots background */} <div class="absolute -z-10 inset-0 h-full w-full bg-[radial-gradient(circle,#73737350_1px,transparent_1px)] bg-[size:10px_10px]" />
bg-[radial-gradient(circle, #737373 10%,透明10%)]：在网格的每个单元格中创建覆盖率为10%的圆形点。
bg-[size:10px_10px]：指定点之间的间距，20px单元格。
absolute -z-10：将点背景放置在其他内容后面。
立即学习“前端免费学习笔记（深入）”；
可选：添加蒙版以增强效果
为了提升网格和点背景的视觉吸引力，您可以应用蒙版。蒙版允许您控制背景的可见性，创建淡入淡出效果。
带遮罩的网格背景：
<div class="absolute -z-10 inset-0 h-full w-full bg-[linear-gradient(to_right,#73737320_1px,transparent_1px),linear-gradient(to_bottom,#73737320_1px,transparent_1px)] bg-[size:20px_20px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_80%,transparent_100%)]" />
带面具的点背景：
<div class="absolute -z-10 inset-0 h-full w-full bg-[radial-gradient(circle,#73737350_1px,transparent_1px)] bg-[size:10px_10px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_80%,transparent_100%)]" />
结果将是这样的：
结论
使用 tailwind css 创建网格和点背景是增强 web 应用程序视觉吸引力的简单而强大的方法。通过将 bg-[线性渐变] 和 bg-[径向渐变] 等实用程序类与 bg-[尺寸] 和可选蒙版等功能相结合，您可以实现各种可定制的动态设计。
我们希望本文为您在项目中实现这些模式提供了明确的指导和启发。无论您是设计全页布局还是为各个组件添加微妙的增强功能，这些技术都可以帮助您创建引人入胜且具有视觉吸引力的用户界面。你可以在我的 github 中找到这个项目。再见，谢谢大家！
