تخفیف ویژه

آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 10) : ویژگی background-origin و background-position

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۲۹ بهمن ۱۳۹۵

css3 attributes

ویژگی background-origin

این ویژگی مشخص میکنه که پس زمینه باید مطابق با چه قسمتی از CSS Box Model موقعیت سنجی بشه. میتونین با این ویژگی به پس زمینه بگید که فقط به محتوا یا Content اعمال بشه و یا اینکه فراتر بره و به قسمت Padding و Border هم وارد بشه. فرقی که بین ویژگی‌های background-origin و background-clip وجود داره اینه که وقتی از background-crop استفاده میکنید، پس زمینه مورد نظر برای اینکه مثلا فقط در قسمت Content قرار بگیره، Crop یا بریده میشه و عکس ما ناقص میشه. اما در background-origin، چیزی از تصویر پس زمینه بریده نمیشه و تغییر سایز میده تا در محدوده مورد نظر جا بگیره. کد زیر رو در نظر بگیرید:

.container {
    background-image:  url(ng.png);
    background-origin: padding-box;
    background-size: 50%;
    padding: 30px;
    border: 10px dashed #000;
}

همونطور که دیدید یک تصویر رو بعنوان پس زمینه قرار دادیم و برای اینکه تفاوت بین background-clip و background-origin رو بهتر بفهمیم، با استفاده از background-size اندازه پس زمینه رو 50% قرار دادیم. این ویژگی مقادیر رو قبول میکنه:

  • padding-box : مقدار پیش فرض این ویژگی هست و باعث میشه که پس زمینه نسبت به خط دور Padding محاسبه بشه. خروجی بصورت زیر هست:background origin 1
  • border-box : با این مقدار، پس زمینه اجازه داره که به کل المنت اعمال بشه. خروجی بصورت زیر هست:background origin 2
  • content-box : با این مقدار پس زمینه فقط به قسمت محتوا یا Content المنت مورد نظر اعمال میشه. خروجی بصورت زیر میشه:background origin 3 همونطور که میبینید در همه موارد بالا، تصویر مورد نظر تغییر سایز میده و اصلا بریده نمیشه. اما اگر از ویژگی background-clip با همین مقدار استفاده کنیم، خروجی بصورت زیر میشه:background origin 4

دیدید که در این حالت تصویر مورد نظر بریده میشه.

ویژگی background-position

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

همچنین میتونیم مقادیر این ویژگی رو در دو جهت افقی و عمودی مشخص کنیم. کلمه هایی که میتونیم برای این ویژگی قرار بدیم عبارتند از: top و bottom و left و right و center و میتونیم از اونا در هر ترکیبی که دوست داشته باشیم استفاده کنیم. اگر فقط یک کلمه کلیدی از موارد بالا رو برای این ویژگی قرار بدیم، اون یکی دیگه بصورت پیش فرض center در نظر گرفته میشه. کد زیر رو در نظر بگیرید:

.container {
    background-position: top;
	background-size: 50%;
    background-image:  url(ng.png);
}
  • top : در این حالت تصویر پس زمینه در بالا و وسط قرار میگیره. بصورت زیر:background origin 5
  • right : در این حالت تصویر در سمت راست و وسط از لحاظ عمودی قرار میگیره. خروجی:background origin 6
  • bottom : پایین و وسط المنت قرار میگیره.background origin 7
  • left : سمت چپ و وسط از لحاظ عمودی قرار میگیره.background origin 8
  • center : در وسط المنت قرار میگیره.background origin 9

برای مقادیر طولی و درصدی نیز میتونیم هم برای جهت افقی و عمودی مقادیر مختلفی رو قرار بدیم. مثالهای زیر رو در نظر بگیرید:

  • 20px 70px : در این حالت پس زمینه مورد نظر، 20 پیکسل در جهت افقی به سمت راست و 70 پیکسل در جهت عمودی به سمت پایین حرکت میکنه. خروجی بصورت زیر میشه:background origin 10
  • 50% : در این حالت تصویر مورد نظر دقیقا در وسط قرار میگیره. خروجی بصورت زیر میشه:background origin 9

به همین راحتی.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.