如何使用 Tailwind CSS 创建网格和点背景-css教程-PHP中文网

如何使用 Tailwind CSS 创建网格和点背景

聖光之護

发布： 2024-11-30 15:39:11

转载

899人浏览过

背景设计对于增强 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 创建网格和点背景

创建点背景

使用 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：将点背景放置在其他内容后面。

如何使用 Tailwind CSS 创建网格和点背景

立即学习“前端免费学习笔记（深入）”；

可选：添加蒙版以增强效果

为了提升网格和点背景的视觉吸引力，您可以应用蒙版。蒙版允许您控制背景的可见性，创建淡入淡出效果。

带遮罩的网格背景：

<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 创建网格和点背景