آموزش CSS - پس زمینه چندگانه

پس‌زمینه‌های چندگانه (Multi Background) در CSS3

خاصیت پس‌زمینه‌های چندگانه در CSS برای افزودن یک یا چندین تصویر به صفحه بدون نیاز به کد HTML، به‌کار می‌رود. این خاصیت به شما امکان می‌دهد تا تصاویر را به صورتی که نیاز دارید به پس‌زمینه المان‌ها اضافه کنید. یک نمونه از دستورالعمل‌های استفاده از پس‌زمینه‌های چندگانه به‌صورت زیر است:

#multibackground {
   background-image: url(/css/images/logo.png), url(/css/images/border.png);
   background-position: left top, left top;
   background-repeat: no-repeat, repeat;
   padding: 75px;
}

رایج‌ترین مقادیر استفاده شده در خاصیت‌های پس‌زمینه در CSS عبارتند از:

ردیف	مقدار و توضیحات
۱	پس زمینه (background) خاصیت background در CSS استفاده می‌شود تا تمام ویژگی‌های یک تصویر پس‌زمینه را در یک قسمت تنظیم کند. این خاصیت به شما امکان می‌دهد تا تنظیمات مربوط به تصویر پس‌زمینه مانند مسیر تصویر، موقعیت، تکرار، اندازه و سایر ویژگی‌ها را در یک مکان کوتاه و بهینه بنویسید. به‌طور کلی، خاصیت background می‌تواند شامل مقادیر زیر باشد: مسیر تصویر: مقدار url('...') برای اشاره به مسیر تصویر. تکرار: مقادیر repeat, repeat-x, repeat-y, no-repeat برای تنظیم حالت تکرار تصویر. موقعیت: مقادیر left, right, center, top, bottom برای تعیین موقعیت افقی و عمودی تصویر. اندازه: مقادیر cover, contain, auto برای تعیین اندازه تصویر نسبت به اندازه المان. سایر ویژگی‌ها: مقادیر مربوط به تنظیمات دیگر مانند رنگ پس‌زمینه و مخفی کردن تصویر.
۲	برش پس زمینه (background-clip) خاصیت background-clip در CSS برای تعیین ناحیه‌ای که تصویر پس‌زمینه در آن پرداخت می‌شود، استفاده می‌شود. این خاصیت به شما امکان می‌دهد که مشخص کنید که تصویر پس‌زمینه باید در کدام ناحیه از المان نمایش داده شود. مقادیر رایج برای خاصیت background-clip عبارتند از: border-box: تصویر پس‌زمینه درون حاشیه‌های المان نمایش داده می‌شود و به حاشیه‌ها اعمال می‌شود. padding-box: تصویر پس‌زمینه درون حاشیه‌ها و پرشونده‌ی پدینگ المان نمایش داده می‌شود و تا محدوده‌ی پدینگ اعمال می‌شود. content-box: تصویر پس‌زمینه فقط درون محتوای المان نمایش داده می‌شود و به محتوا اعمال می‌شود. با استفاده از این خاصیت، می‌توانید تصویر پس‌زمینه را در ناحیه‌های مختلف المان نمایش دهید و تأثیرات آن را در تعیین شکل و ظاهر المان‌های وب کنترل کنید.
۳	تصویر پس زمینه (background-image) خاصیت background-image در CSS برای مشخص کردن یک تصویر به عنوان پس‌زمینه یک المان وب استفاده می‌شود. با استفاده از این خاصیت، شما می‌توانید یک تصویر را به عنوان پس‌زمینه یک المان اضافه کنید، که این تصویر معمولاً در پس‌زمینه متن یا محتوای المان نمایش داده می‌شود. مقدار این خاصیت معمولاً یک مسیر فایل تصویر است که مشخص می‌کند کدام تصویر باید به عنوان پس‌زمینه استفاده شود همچنین، می‌توانید از خاصیت ()linear-gradient یا ()radial-gradient نیز برای ایجاد تصویر‌های گرادیانت به عنوان پس‌زمینه استفاده کنید، که این امر به شما امکان می‌دهد تا پس‌زمینه‌هایی با انتقال رنگ‌ها یا افق‌های مختلف ایجاد کنید.
۴	موقعیت پس زمینه (background-origin) خاصیت background-origin در CSS برای تعیین موقعیت مبدأ تصاویر پس‌زمینه یک المان وب استفاده می‌شود. این خاصیت به شما امکان می‌دهد تا مشخص کنید که تصویر پس‌زمینه یک المان از کجا شروع شود و چگونه در آن المان نمایش داده شود. مقادیر رایج برای background-origin عبارتند از: padding-box: تصویر پس‌زمینه از مبدأ پدینگ المان شروع می‌شود و درون حاشیه‌ها نمایش داده می‌شود. border-box: تصویر پس‌زمینه از مبدأ حاشیه‌های المان شروع می‌شود و درون حاشیه‌ها نمایش داده می‌شود. content-box: تصویر پس‌زمینه فقط درون محتوای المان نمایش داده می‌شود و از مبدأ محتوا شروع می‌شود. با استفاده از خاصیت background-origin، شما می‌توانید محل شروع تصویر پس‌زمینه را نسبت به حاشیه‌ها یا محتوای المان کنترل کنید و به این ترتیب ظاهر کلی المان را تنظیم کنید.
۵	اندازه پس زمینه (background-size) خاصیت background-size در CSS برای تعیین اندازه تصویر پس‌زمینه یک المان وب استفاده می‌شود. این خاصیت به شما امکان می‌دهد که ابعاد تصویر پس‌زمینه را تنظیم کنید، از جمله اندازه عرض و ارتفاع آن. مقادیر معمول برای background-size شامل موارد زیر می‌شود: عرض و ارتفاع خاصیت: این مقدار به صورت عددی یا به عنوان درصد از ابعاد اصلی تصویر مشخص می‌شود، به عنوان مثال background-size: 50% 100% یا background-size: 200px 300px. پوشش (Cover): تصویر به طور خودکار تغییر اندازه می‌یابد تا کل المان را پوشش دهد، با رعایت نسبت ابعاد تصویر. تنظیم متناسب (Contain): تصویر به طور خودکار تغییر اندازه می‌یابد تا کل تصویر داخل المان قرار بگیرد، با رعایت نسبت ابعاد تصویر. با استفاده از background-size، می‌توانید تصاویر پس‌زمینه را به ابعاد دلخواه تنظیم کنید و ظاهر کلی المان‌های وب را بهینه‌تر کنید.

مثال

<html>
   <head>
      <style>
         #multibackground {
            background-image: url(/css/images/logo.png), url(/css/images/border.png);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
   </head>

   <body>
   
      <div id = "multibackground">
         <h1>www.example.com</h1>
         <p>
            tut24 از این ایده سرچشمه می گیرد که کلاسی از وجود دارد
            خوانندگانی که به محتوای آنلاین بهتر پاسخ می دهند و ترجیح می دهند مطالب جدید یاد بگیرند
            مهارت‌ها با سرعت خودشان از اتاق‌های نشیمنشان.
            این سفر با یک آموزش واحد در HTML  با لذت آغاز شد
            با پاسخی که ایجاد کرد، ما راه خود را برای اضافه کردن آموزش‌های تازه کار کردیم
            به مخزن ما که اکنون با افتخار تعداد زیادی آموزش و
            مقالات مرتبط با موضوعاتی از زبان های برنامه نویسی گرفته تا طراحی وب
            به دانشگاهیان و خیلی چیزهای دیگر..
         </p>
      </div>
      
   </body>
</html>

اندازه پس زمینه چندگانه

ویژگی چند پس‌زمینه برای افزودن اندازه‌های مختلف برای تصاویر مختلف پذیرفته می‌شود. یک نحو نمونه مانند شکل زیر است -

#multibackground {
   background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
   background-size: 50px, 130px, auto;
}

حاشیه تصویر (Border Image) - درس قبلی

درس بعدی - گرادیانت‌