如何使用 Tailwind CSS 建立網格和點背景

背景設計對於增強 Web 應用程式的視覺吸引力至關重要。最通用且最具視覺吸引力的圖案是網格和點。 Tailwind CSS 憑藉其強大的實用程式類，使創建這些模式既簡單又高效。在本文中，我們將探索如何使用 Tailwind CSS 建立網格和點背景，並提供逐步指導和實際範例。

建立網格背景

網格背景是使用線性漸層結合 Tailwind CSS 中的 bg-[size] 屬性建立的。以下是實現這一目標的方法：

{/* 網格背景 */}

<div>



<p>bg-[linear-gradient(...)]: 定義兩個線性漸變，一個用於垂直線，另一個用於水平線。 <br>
bg-[size:20px_20px]: 將網格單元格大小設定為 20px x 20px。 <br>
-z-10：將網格背景置於內容後方。 </p>

<p>然後讓我們在元件中實現它<br>
</p>

<pre class="brush:php;toolbar:false"> <div>



<p>為了使網格背景正確定位並位於其他元素後面，父容器必須具有相對類別。這確保背景尊重父組件的邊界。 </p>

<p>它看起來像這樣：</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173477558542862.jpg" alt="How to Create Grid and Dots Background Using Tailwind CSS"></p>

<h2>
  
  
  建立點背景
</h2>

<p>使用 Tailwind CSS，您可以使用徑向漸層來實現這種效果。以下是實現點背景的方法：<br>
</p>

<pre class="brush:php;toolbar:false">{/* 點背景 */}
<div>



<p>bg-[radial-gradient(circle, #737373 10%,透明10%)]：在網格的每個單元格中建立覆蓋率為10%的圓形點。 <br>
bg-[size:10px_10px]：指定點之間的間距，20px單元格。 <br>
Absolute -z-10：將點背景放置在其他內容後面。 </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173477558652016.jpg" alt="How to Create Grid and Dots Background Using Tailwind CSS"></p>
<h2>
  
  
  可選：新增蒙版以增強效果
</h2>

<p>為了提升網格和點背景的視覺吸引力，您可以套用蒙版。蒙版可讓您控制背景的可見性，創造淡入淡出效果。 </p>

<p>有遮罩的網格背景：<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>有面具的點背景：<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>結果會是這樣的：</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173477558730058.jpg" alt="How to Create Grid and Dots Background Using Tailwind CSS"></p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173477558855270.jpg" alt="How to Create Grid and Dots Background Using Tailwind CSS"></p>
<h2>
  
  
  結論
</h2>

<p>使用 Tailwind CSS 建立網格和點背景是增強 Web 應用程式視覺吸引力的簡單且強大的方法。透過將 bg-[線性漸變] 和 bg-[徑向漸層] 等實用程式類別與 bg-[尺寸] 和可選蒙版等功能結合，您可以實現各種可自訂的動態設計。 </p>

<p>我們希望本文為您在專案中實現這些模式提供了明確的指導和靈感。無論您是設計全頁佈局還是為各個元件添加微妙的增強功能，這些技術都可以幫助您創建引人入勝且具有視覺吸引力的使用者介面。你可以在我的 github 中找到這個專案。再見，謝謝大家！ </p>


          </div>