چگونگی عملکرد Background style در Tailwind CSS

با سلام خدمت همه دوستان و همراهان همیشگی وب سایت فراز کد:

Background style در Tailwind CSS، یوتیلیتی‌های مربوط به استایل‌های پس‌زمینه (Background Style) به شما اجازه می‌دهند که به راحتی و با استفاده از کلاس‌های از پیش تعریف‌شده، ویژگی‌های مختلف پس‌زمینه را تنظیم کنید. در ادامه، تمام یوتیلیتی‌های پس‌زمینه را به همراه توضیح کوتاهی درباره عملکرد آن‌ها آورده‌ام:

یوتیلیتی Background Color در تیلویند

کلاس‌های bg-{color} برای تنظیم رنگ پس‌زمینه عنصر استفاده می‌شوند. Tailwind رنگ‌های پیش‌فرض زیادی دارد که می‌توان آن‌ها را سفارشی‌سازی هم کرد. به طور کلی ساختار کلاس‌های رنگ پس‌زمینه به این شکل است:

bg-{color}-{shade}.

• مثال‌ها:
  • bg-red-500 : پس‌زمینه قرمز با میزان شدت رنگ 500.
  • bg-blue-100 : پس‌زمینه آبی روشن.
  • bg-gray-900 : پس‌زمینه خاکستری تیره.

این کلاس‌ها به شما امکان تنظیم رنگ‌هایی با شدت‌های مختلف را می‌دهند، که برای طراحی‌های چندلایه و رنگ‌های متناسب بسیار مفید هستند. این کلاس‌ها رنگ پس‌زمینه عنصر را تغییر می‌دهند و از رنگ‌های پیش‌فرض Tailwind یا رنگ‌های سفارشی‌سازی‌شده‌ی شما استفاده می‌کنند.

<div class="bg-blue-500"></div>
<div class="bg-red-200"></div>
<div class="bg-gray-900"></div>

یوتیلیتی Background Opacity در تیلویند

کلاس‌های bg-opacity-{value} میزان شفافیت پس‌زمینه را با مقداری بین ۰ تا ۱۰۰ تنظیم می‌کنند. این کلاس‌ها در مواقعی مفید هستند که می‌خواهید رنگ پس‌زمینه تا حدی شفاف باشد.

• مثال‌ها:
  • bg-opacity-25 : شفافیت پس‌زمینه ۲۵ درصد.
  • bg-opacity-75 : شفافیت پس‌زمینه ۷۵ درصد.

در استفاده از این کلاس‌ها، باید رنگ پس‌زمینه را نیز تعیین کنید؛ به عنوان مثال، bg-red-500 bg-opacity-50 یک پس‌زمینه قرمز با شفافیت ۵۰ درصد ایجاد می‌کند. این کلاس‌ها میزان شفافیت پس‌زمینه را با مقدار درصدی بین ۰ تا ۱۰۰ کنترل می‌کنند.

<div class="bg-opacity-50 bg-blue-500"></div>

یوتیلیتی Background Image در تیلویند

کلاس‌های bg-{image} برای تنظیم تصویر پس‌زمینه یک عنصر به کار می‌روند. در حالت کلی، کلاس bg-none برای حذف هر گونه تصویر پس‌زمینه استفاده می‌شود و گرادیان‌های مختلف نیز به‌عنوان تصویر پس‌زمینه عمل می‌کنند.

• کلاس‌ها:
  • bg-none : بدون تصویر پس‌زمینه.
  • bg-gradient-to-{direction} : ایجاد گرادیان به جهت‌های مختلف.
    • bg-gradient-to-r : از چپ به راست.
    • bg-gradient-to-t : از پایین به بالا.
• مثال‌ها:
  • bg-gradient-to-r from-green-400 to-blue-500 : گرادیان از رنگ سبز به آبی که از چپ به راست حرکت می‌کند.
  • bg-gradient-to-b from-purple-500 to-pink-500 : گرادیان از بالا به پایین که از رنگ بنفش به صورتی تغییر می‌کند.

کلاس‌های زیر برای تنظیم تصویر پس‌زمینه‌ی یک عنصر به کار می‌روند.

<div class="bg-none"></div> <!-- بدون تصویر -->
<div class="bg-gradient-to-r from-blue-500 to-red-500"></div> <!-- گرادینت -->

یوتیلیتی موقعیت تصویر پس‌زمینه (Background Position) در تیلویند

کلاس‌های bg-{position} برای تنظیم موقعیت تصویر پس‌زمینه به کار می‌روند. این موقعیت‌ها معمولا با توجه به عنصر و عرض و ارتفاع تصویر تنظیم می‌شوند.

• کلاس‌ها:
  • bg-left : تصویر پس‌زمینه به سمت چپ تنظیم می‌شود.
  • bg-right : تصویر پس‌زمینه به سمت راست تنظیم می‌شود.
  • bg-center : تصویر در مرکز تنظیم می‌شود (پیش‌فرض).
  • bg-top, bg-bottom : تنظیم تصویر به سمت بالا یا پایین.
• مثال‌ها:
  • bg-left-bottom: تصویر در گوشه پایین سمت چپ عنصر قرار می‌گیرد.
  • bg-center: تصویر در مرکز عنصر قرار می‌گیرد.

این کلاس‌ها موقعیت تصویر پس‌زمینه را در داخل عنصر مشخص می‌کنند.

<div class="bg-left"></div>
<div class="bg-center"></div>
<div class="bg-right-bottom"></div>

یوتیلیتی اندازه تصویر پس‌زمینه (Background Size) در تیلویند

کلاس‌های bg-{size} برای تغییر اندازه تصویر پس‌زمینه استفاده می‌شوند. این کلاس‌ها کنترل خوبی روی نحوه نمایش تصاویر در سایز‌های مختلف می‌دهند.

• کلاس‌ها:
  • bg-auto : اندازه تصویر به صورت خودکار تنظیم می‌شود.
  • bg-cover : تصویر پس‌زمینه کل فضای عنصر را می‌پوشاند، حتی اگر نیاز به برش دادن تصویر باشد.
  • bg-contain : تصویر به‌گونه‌ای تنظیم می‌شود که تمام آن داخل عنصر جای بگیرد، بدون برش.
• مثال‌ها:
  • bg-cover : این کلاس برای پوشاندن کل پس‌زمینه به کار می‌رود.
  • bg-contain : این کلاس تضمین می‌کند که تمام تصویر در داخل عنصر نمایش داده شود.

این کلاس‌ها اندازه تصویر پس‌زمینه را تعیین می‌کنند.

<div class="bg-auto"></div>
<div class="bg-cover"></div>
<div class="bg-contain"></div>

یوتیلیتی تکرار تصویر پس‌زمینه (Background Repeat) در تیلویند

کلاس‌های bg-{repeat} برای کنترل تکرار تصویر پس‌زمینه استفاده می‌شوند.

• کلاس‌ها:
  • bg-repeat : تصویر پس‌زمینه تکرار می‌شود.
  • bg-no-repeat : تصویر تنها یک‌بار نمایش داده می‌شود.
  • bg-repeat-x : تصویر فقط در محور افقی تکرار می‌شود.
  • bg-repeat-y : تصویر فقط در محور عمودی تکرار می‌شود.
• مثال‌ها:
  • bg-no-repeat bg-center : یک تصویر بدون تکرار در مرکز قرار می‌گیرد.
  • bg-repeat-x : تصویر فقط به صورت افقی تکرار می‌شود.

این کلاس‌ها مشخص می‌کنند که تصویر پس‌زمینه در عنصر تکرار شود یا خیر.

<div class="bg-repeat"></div>
<div class="bg-no-repeat"></div>
<div class="bg-repeat-x"></div> <!-- فقط در محور افقی -->
<div class="bg-repeat-y"></div> <!-- فقط در محور عمودی -->

یوتیلیتی اتصال تصویر پس‌زمینه (Background Attachment) در تیلویند

این کلاس‌ها مشخص می‌کنند که تصویر پس‌زمینه با حرکت صفحه ثابت بماند یا همراه با صفحه جابجا شود.

• کلاس‌ها:
  • bg-fixed : تصویر پس‌زمینه ثابت می‌ماند و با اسکرول صفحه حرکت نمی‌کند.
  • bg-local: تصویر پس‌زمینه همراه با محتوا حرکت می‌کند.
  • bg-scroll : تصویر پس‌زمینه با اسکرول صفحه حرکت می‌کند (پیش‌فرض).
• مثال‌ها:
  • bg-fixed: برای تصاویری که می‌خواهید ثابت بمانند مناسب است، مانند استفاده در بک‌گراند صفحات.

این کلاس‌ها تنظیم می‌کنند که تصویر پس‌زمینه با حرکت صفحه ثابت بماند یا حرکت کند.

<div class="bg-fixed"></div>
<div class="bg-local"></div>
<div class="bg-scroll"></div>

یوتیلیتی حالت تصویر پس‌زمینه (Background Clip) در تیلویند

این کلاس‌ها مشخص می‌کنند که تصویر پس‌زمینه تا چه قسمتی از عنصر کشیده شود.

• کلاس‌ها:
  • bg-clip-border : تصویر پس‌زمینه تا مرزهای حاشیه عنصر کشیده می‌شود.
  • bg-clip-padding : تصویر پس‌زمینه تا قسمت padding عنصر کشیده می‌شود.
  • bg-clip-content : تصویر پس‌زمینه تا قسمت محتوا کشیده می‌شود.
  • bg-clip-text : تصویر به عنوان پس‌زمینه متن عمل می‌کند.
• مثال‌ها:
  • bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600: نمایش گرادیان رنگی به عنوان پس‌زمینه متن، که متن شفاف شده و پس‌زمینه نمایان می‌شود.

این کلاس‌ها مشخص می‌کنند که تصویر پس‌زمینه تا چه قسمتی از عنصر کشیده شود.

<div class="bg-clip-border"></div> <!-- محدود به حاشیه -->
<div class="bg-clip-padding"></div> <!-- محدود به پدینگ -->
<div class="bg-clip-content"></div> <!-- محدود به محتوا -->
<div class="bg-clip-text"></div> <!-- فقط متن -->

یوتیلیتی گرادیان‌های پس‌زمینه (Background Gradient) در تیلویند

در Tailwind، گرادیان‌ها به عنوان تصویر پس‌زمینه استفاده می‌شوند و از کلاس‌های bg-gradient-to-{direction} به همراه from-{color} و to-{color} برای تنظیم آن استفاده می‌شود. همچنین می‌توان از via-{color} برای تنظیم رنگ میانی استفاده کرد.

• مثال‌ها:
  • bg-gradient-to-r from-green-400 to-blue-500 : گرادیانی از چپ به راست که از سبز به آبی تغییر می‌کند.
  • bg-gradient-to-b from-purple-500 via-pink-500 to-red-500 : گرادیانی از بالا به پایین که رنگ‌های بنفش، صورتی و قرمز دارد.

کلاس‌های گرادیان به شما امکان ایجاد گرادیان‌های مختلف رنگی را می‌دهند. در واقع، از گرادیان‌ها به جای تصویر پس‌زمینه استفاده می‌شود.

<div class="bg-gradient-to-r from-green-400 to-blue-500"></div> <!-- گرادیان از چپ به راست -->
<div class="bg-gradient-to-b from-purple-500 to-pink-500"></div> <!-- گرادیان از بالا به پایین -->

یوتیلیتی ترکیب حالت پس‌زمینه (Background Blend Mode) در تیلویند

این کلاس‌ها نحوه ترکیب چندین تصویر یا رنگ پس‌زمینه را با یکدیگر تنظیم می‌کنند. این کلاس‌ها به‌خصوص در مواردی که می‌خواهید یک تصویر با یک رنگ روی هم بیافتند، بسیار کاربردی هستند.

• کلاس‌ها:
  • bg-blend-normal : حالت ترکیب معمولی.
  • bg-blend-multiply : حالت ترکیب چندگانه که به صورت ضربی عمل می‌کند.
  • bg-blend-screen : حالت ترکیب صفحه‌ای.
  • bg-blend-overlay : حالت ترکیب هم‌پوشانی.
• مثال‌ها:
  • bg-blend-overlay : استفاده از این حالت باعث می‌شود رنگ‌ها و تصاویر پس‌زمینه به صورت هم‌پوشانی ترکیب شوند.
  • bg-blend-multiply : این حالت برای ترکیب رنگ‌های پس‌زمینه و ایجاد کنتراست بیشتر مفید است.

این کلاس‌ها حالت ترکیب تصویر پس‌زمینه را مشخص می‌کنند.

<div class="bg-blend-normal"></div>
<div class="bg-blend-multiply"></div>
<div class="bg-blend-screen"></div>
<div class="bg-blend-overlay"></div>

خلاصه‌ای از یوتیلیتی‌های Background Style در Tailwind CSS:

این کلاس‌ها به شما امکان کنترل کامل روی استایل پس‌زمینه عناصر را می‌دهند و از ترکیب آن‌ها می‌توان به‌سادگی و بدون نیاز به CSS سفارشی، پس‌زمینه‌های جذاب ایجاد کرد.