دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱
  • آبان

جلسه ۴۱ : پس زمینه چندگانه در CSS

  • دسته‌بندی‌ها :
جلسه ۴۱ : پس زمینه چندگانه در CSS
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. با معرفی CSS3 قابلیت ها و ویژگی های زیادی نسبت به نسخه های قبلی CSS معرفی شد که یکی از این ویژگی ها multiple background ( پس زمینه چندگانه در CSS ) می باشد. این ویژگی به شما امکان تعریف چند تصویر پس زمینه در CSS را می دهد. به این ترتیب شما می توانید تنها با استفاده از یک عنصر HTML از پس زمینه های مختلف که روی هم قرار دارند استفاده کنید، و حجم کد HTML شما نیز کاهش می یابد. برای آشنایی با چگونگی تعریف چند تصویر پس زمینه در CSS در ادامه ی این مبحث با ما همراه باشید.

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

      در ادامه این آموزش طرز استفاده از ویژگی multiple background برای تعریف چند تصویر پس زمینه در CSS را ارائه کرده ایم.

      ویژگی multiple background (تعریف چند تصویر پس زمینه در CSS)

      CSS به شما اجازه می دهد تا با استفاده از ویژگی background-image برای یک عنصر تصاویر پس زمینه متعدد تعریف کنید.

      تصاویر پس زمینه چندگانه در CSS با کاما (,) از یکدیگر جدا شده و روی هم قرار می گیرند.

      مثال زیر چگونگی استفاده از قابلیت multiple background برای تعریف چند تصویر پس زمینه در CSS را بخوبی نشان می دهد:

      مثال : دو تصویر پس زمینه
      خودتان امتحان کنید »

      تصاویر پس زمینه چندگانه را هم می توان با خصوصیات انفرادی (همانند مثال فوق) مشخص کرد و هم می توان با همه را در یک خصوصیت کوتاه خلاصه کرد:

      خصوصیات مثال فوق را در یک خصوصیت background خلاصه می کنیم:

      مثال : کوتاه کردن کد قبل
      خودتان امتحان کنید »

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

      با استفاده از خصوصیت background-size می توانیم اندازه ی پس زمینه را مشخص کنیم.

      اندازه ی پس زمینه را می توان بر حسب واحدهای اندازه گیری و یا درصد تعیین کرد.

      همچنین می توان از دو مقدار contain یا cover نیز استفاده کرد.

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

      Pvlearn

      مرجع آموزش و یادگیری کامپیوتر – دوره های آموزشی مختلف برنامه نویسی و طراحی سایت – آموزش نرم افزارهای کاربردی و گرافیکی و …

      کد حالت فوق به صورت زیر خواهد بود:

      مثال : تنظیم اندازه ی پس زمینه
      خودتان امتحان کنید »

      همچنین دو مقدار contain و cover برای خصوصیت background-size تعریف شده است.

      کلمه ی کلیدی contain تصویر پس زمینه را بزرگ می کند (اما طول عرض آن را متناسب با عنصر در نظر می گیرد).

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

      مثال زیر عملکرد دو ویژگی contain و cover را  به خوبی نشان می دهد:

      مثال : مقادیر contain و cover
      خودتان امتحان کنید »

      تعریف اندازه ی تصویر چندگانه

      شما می توانید چندین مقدار مختلف را در خصوصیت background-size برای تعیین اندازه پس زمینه های چندگانه وارد کنید.

      در مثال زیر سه پس زمینه ی مختلف برای یک عنصر با اندازه های مختلف تعریف شده است:

      مثال : نمونه ای از چند پس زمینه با اندازه های مختلف
      خودتان امتحان کنید »

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

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

      الزامات این کار عبارتند از:

      • تمام صفحه را با تصویر پر کنید (بدون فضای سفید).
      • مقیاس تصویر به مقدار مورد نیاز.
      • موقعیت تصویر در مرکز صفحه.
      • نوارهای اسکرول را ایجاد نکنید.

      در مثال زیر اینکار را با استفاده از عنصر <html> (این عنصر حداقل ارتفاع پنجره ی مرورگر است) انجام می دهیم.

      سپس ویژگی  background-size را برای عنصر html تعریف می کنیم:

      مثال : پس زمینه تمام صفحه
      خودتان امتحان کنید »

      تصویر Hero

      شما همچنین می توانید از ویژگی های مختلف پس زمینه در یک عنصر <div> برای ایجاد یک تصویر hero (یک تصویر بزرگ با متن) استفاده کنید.

      مثال : تصویر hero
      خودتان امتحان کنید »

      ویژگی origin

      ویژگی background-origin مشخص می کند که تصویر پس زمینه در کجا موقعیت دهی شود.

      این ویژگی سه مقدار مختلف را می گیرد:

      • border-box : تصویر پس زمینه از گوشه بالا سمت چپ مرز عنصر شروع می شود.
      • padding-box : (پیش فرض) تصویر پس زمینه از گوشه بالا سمت چپ لبه padding شروع می شود.
      • content-box : تصویر پس زمینه از گوشه بالا سمت چپ محتوا آغاز می شود.

      مثال زیر عملکرد ویژگی background-origin را به خوبی نشان می دهد:

      مثال : ویژگی origin
      خودتان امتحان کنید »

      ویژگی background-clip

      ویژگی  background-clip مشخص کننده منطقه نقاشی پس زمینه است.

      این ویژگی سه مقدار زیر را شامل می شود:

      • border-box : پس زمینه تا لبه خارجی مرز عنصر رنگی می شود.
      • padding-box : پس زمینه تا لبه خارجی padding عنصر رنگی می شود.
      • content-box : فقط پس زمینه ی بخش محتوای عنصر رنگی می شود.

      مثال زیر عملکرد ویژگی background-clip را به خوبی نشان می دهد:

      مثال : خصوصیت background-clip
      خودتان امتحان کنید »

      خصوصیات پس زمینه در CSS:

      ویژگیتوضیحات
      backgroundیک ویژگی مختصر برای تنظیم تمام خواص پس زمینه در یک ویژگی
      background-clipمنطقه رنگی پس زمینه را مشخص می کند.
      background-imageیک یا چند تصویر پس زمینه برای یک عنصر را مشخص می کند.
      background-originموقعیت تصویر پس زمینه را مشخص می کند.
      background-sizeاندازه ی تصویر پس زمینه را مشخص می کند.

      کلام آخر

      در مواردی که نیاز به تعریف پس زمینه های مختلف رو هم دارید ویژگی پس زمینه چندگانه در CSS بهترین گزینه برای این کار است، این قابلیت علاوه بر ارائه ی ویژگی تعریف چند تصویر پس زمینه در CSS اجازه ی تعیین جزیئاتی از جمله موقعیت ، اندازه و … را برای تصاویر پس زمینه ارائه می دهد.

      QR:  جلسه ۴۱ : پس زمینه چندگانه در CSS
      به اشتراک بگذارید