Cara Membuat Latar Belakang Grid dan Titik Menggunakan CSS Tailwind

Reka bentuk latar belakang adalah penting untuk meningkatkan daya tarikan visual aplikasi web. Antara corak yang paling serba boleh dan menarik secara visual ialah grid dan titik. CSS Tailwind, dengan kelas utiliti yang berkuasa, menjadikan penciptaan corak ini mudah dan cekap. Dalam artikel ini, kami akan meneroka cara membuat latar belakang grid dan titik menggunakan Tailwind CSS, memberikan panduan langkah demi langkah dan contoh praktikal.

Mencipta Latar Belakang Grid

Latar belakang grid dibuat menggunakan kecerunan linear digabungkan dengan sifat bg-[size] dalam Tailwind CSS. Begini cara anda boleh mencapai ini:

{/* Latar belakang grid */}

<div>



<p>bg-[linear-gradient(...)]: Mentakrifkan dua kecerunan linear, satu untuk garis menegak dan satu lagi untuk garis mendatar.<br>
bg-[size:20px_20px]: Tetapkan saiz sel grid kepada 20px kali 20px.<br>
-z-10: Meletakkan latar belakang grid di belakang kandungan.</p>

<p>kemudian mari kita laksanakan ini dalam komponen<br>
</p>

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



<p>Untuk kedudukan latar belakang grid dengan betul dan kekal di belakang elemen lain, bekas induk mesti mempunyai relativeclass. Ini memastikan latar belakang menghormati sempadan komponen induk.</p>

<p>dan ia akan kelihatan seperti ini:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173477558542862.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Create Grid and Dots Background Using Tailwind CSS"></p>

<h2>
  
  
  Mencipta Latar Belakang Titik
</h2>

<p>Dengan CSS Tailwind, anda boleh mencapai kesan ini menggunakan kecerunan jejari. Begini cara untuk melaksanakan latar belakang titik:<br>
</p>

<pre class="brush:php;toolbar:false">{/* Latar belakang titik */}
<div>



<p>bg-[radial-gradient(bulatan, #737373 10%, lutsinar 10%)]: Mencipta titik bulat dengan liputan 10% dalam setiap sel grid.<br>
bg-[size:10px_10px]: Menentukan jarak antara titik, dengan sel 20px.<br>
mutlak -z-10: Meletakkan latar belakang titik di belakang kandungan lain.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173477558652016.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Create Grid and Dots Background Using Tailwind CSS"></p>
<h2>
  
  
  Pilihan: Tambah Mask untuk Kesan Dipertingkat
</h2>

<p>Untuk meningkatkan daya tarikan visual latar belakang grid dan titik anda, anda boleh menggunakan topeng. Topeng membenarkan anda mengawal keterlihatan latar belakang, mencipta kesan pudar.</p>

<p>Latar belakang grid dengan topeng:<br>
</p>

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



<p>Latar belakang titik dengan topeng:<br>
</p>

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



<p>Hasilnya adalah seperti ini:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173477558730058.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Create Grid and Dots Background Using Tailwind CSS"></p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173477558855270.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Create Grid and Dots Background Using Tailwind CSS"></p>
<h2>
  
  
  Kesimpulan
</h2>

<p>Mencipta latar belakang grid dan titik dengan Tailwind CSS ialah cara yang mudah tetapi berkesan untuk meningkatkan daya tarikan visual aplikasi web anda. Dengan menggabungkan kelas utiliti seperti bg-[linear-gradient] dan bg-[radial-gradient] dengan ciri seperti bg-[saiz] dan topeng pilihan, anda boleh mencapai pelbagai jenis reka bentuk yang boleh disesuaikan dan dinamik.</p>

<p>Kami berharap artikel ini telah memberikan panduan dan inspirasi yang jelas untuk melaksanakan corak ini dalam projek anda. Sama ada anda mereka bentuk reka letak halaman penuh atau menambah peningkatan halus pada komponen individu, teknik ini boleh membantu anda mencipta antara muka pengguna yang menarik dan menarik secara visual. Anda akan menemui projek ini dalam github saya. Jumpa lagi, Terima kasih kawan!</p>


          </div>