cssblog.ir logo
P

background-position

تغییر محل قرارگیری تصویر پس زمینه

مشخصه backgroun-position امکانات بسیار زیادی را در اختیارتان قرار می‌دهد و از طریق آن می توانید به هر شکلی که بخواهید تصویر پس زمینه را موقعیت‌دهی کنید

یکی از مشخصه های بسیار کاربری پس زمینه ها در CSS مشخصه background-position می باشد. در بسیاری از مواقع ما می‌خواهیم که تصویر زمینه خود را در داخل فضای آن جابجا کنیم. مثلا لوگویی را که به پس زمینه یک عنصر داده ایم در نقطه وسط افقی و عمودی آن قرار دهیم یا مثلا پس زمینه به جای بالا از پایین شروع شود. برای انجام چنین کارهایی می توانیم از این مشخصه استفاده کنیم. 

این مشخصه دو مقدار را قبول می کند. مقدار اول مربوط به موقعیت افقی و مقدار دوم مربوط به موقعیت عمودی تصویر زمینه است. ما به ۳ شکل می توانیم این مشخصه را مقداردهی کنیم:

مقادیر طولی (مانند 200px 50px

مقادیر درصدی (مانند 20% 40%

کلمات کلیدی (مانند top left)

مقادیر مجاز طول در CSS

ما می‌توانیم از مقادیری که برای استفاده بعنوان طول مجاز هستند، در این مشخصه استفاده کنیم. مثلا اگر ما مقدار 100px 20px را وارد کنیم تصویر زمینه به اندازه ۱۰۰ پیکسل به سمت راست و ۲۰ پیکسل به سمت پایین حرکت خواهد کرد. همچنین ما می‌توانیم از مقادیر منفی نیز برای حرکت به سمت بالا و چپ استفاده کنیم. 

لیست مقادیر مجاز برای طول

مثال: خورشید داخل تصویر از سمت چپ به میزان 60px و از سمت بالا به اندازه 10px فاصله گرفته است.

مقادیر درصدی

نحوه عملکرد مقادیر درصدی مقداری متفاوت‌تر است. وقتی که برای موقعیت افقی مقداری مانند ۲۰٪ وارد شود، تصویر طوری تنظیم میشود که آن نقطه از تصویر (در اینجا ۲۰٪) در نقطه ۲۰٪ فضا (container) قرار می‌گیرد. یا مثلا مقدار ۱۰۰٪ افقی به این معنی است که آخرین نقطه تصویر (یا همان نقطه ۱۰۰ درصد آن که در سمت راست قرار دارد) با آخرین نقطه از فضای آن تنظیم می‌شود.  

کلمات کلیدی 

ما ۵ کلمه کلیدی داریم که می توانیم از آنها برای موقعیت های عمودی و افقی تصاویر زمینه استفاده کنیم. می توان گفت که کلمات کلیدی معادل همان یک درصدهای خاصی هستند. برای مثال می توان از مقدار top right به جای 0 100% استفاده نمود. لیست این کلمات به شرح زیر است:

topیعنی از لحاظ عمودی 0%

rightیعنی از لحاظ افقی 100%

bottomیعنی از لحاظ عمودی 100%

leftاز لحاظ افقی 0%

centerبه معنی 50% افقی است اما افقی بودن آن بسته به این دارد که قبلا مقدار افقی تعیین شده است یا نه. اگر قبلا تعیین شده باشد بصورت عمودی لحاظ می‌شود. 

در نظر داشته باشید که مهم نیست شما کلمات کلیدی را با چه ترتیبی وارد می‌کنید. مثلا مقدار top center معادل مقدار center top است. البته این فقط برای وقتی است که از کلمات کلیدی استفاده می کنیم وگرنه center 10% برابر با 10% center نیست. 

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

با تغییر background-position ازbottom بهtop درختان به بالای قسمت آبی رنگ منتقل خواهند شد. همچنین بدلیل استفاده از background-repeat کلماتی مانندleft یاright تاثیری در نتیجه نخواهند داشت.

ترکیب های مختلف مقادیر

در مرورگرهای جدید و مدرن می توان تا ۴ مقدار برای موقعیت پس زمینه تعیین نمود که بنا بر تعداد مقادیر رفتارها اندکی متفاوت خواهد بود.

فقط یک مقدار

اگر فقط یک مقدار وارد شود آن مقدار بعنوان موقعیت افقی درنظر گرفته می شود و موقعیت عمودی برابر با centerخواهد بود.

۲ مقدار

اگر دو مقدار وارد شوند اولین آنها برای موقعیت افقی و دومین آنها برای عمودی درنظر گرفته می شود. 

div {
	background-position: right center;
}

وارد کردن ۳ یا ۴ مقدار قضیه را اندکی پیچیده تر می کند. در این حالات نمی توان از کلمه کلیدی centerاستفاده نمود اما از سایر کلمات کلیدی با ترکیبی که در ادامه بیان خواهم کرد، می توان استفاده کرد. در ابتدا حالت ۴ مقداره را توضیح می دهم تا پس از آن معنی ۳ مقدار را بیان کنم. 

۴ مقدار

وقتی که در این حالت مقادیر را وارد می کنیم انگار که برای هر جهت (افقی یا عمودی) ابتدا مبنایی تعیین می کنیم (مثلا بالا یا پایین و چپ یا راست) و سپس مقداری را برای آن جهت وارد می کنیم. مثلا در مقدار اول می گویم که قصد موقعیت دهی از سمت چپ را داریم، پس اولین مقدار left و پس از آن می گویم حالا که مبنا سمت چپ شد، مقدار ۲۰ پیکسل از آنجا فاصله بگیر. سپس می گویم قصد موقعیت دهی از پایین را داریم و دوباره می گویم که حالا از پایین ۴۰ پیکسل فاصله بگیر. (به همین دلیل است که نمی‌توانیم center را در اینجا استفاده کنیم)

مثال:‌ در این مثال از ۲ تصویر پس‌زمینه استفاده شده است که یکی برای سیب و دیگری برای پنجره هستند. همانطور که مشاهده می کنید آیکون سیب با استفاده از مقداردهی ۴ تایی background-position روی لبه پنجره قرار گرفته است.  

۳ مقدار

من در ابتدا حالت ۴ مقداره را بیان نمودم که در اینجا درک ۳ مقدار برای شما راحت شود. در یک جمله می توان گفت که این حالت دقیقا مانند ۴ مقداره است اما انگار که بجای مقدار چهارم یک ۰ نامرئی قرار داده ایم. (کاری که مرورگر انجام می دهد همین است)

مثال: ‌‌‌‌در این مثال از مبنای راست برای موقعیت‌دهی افقی سیب استفاده شده است. اما سیب بدلیل استفاده از حالت ۳ مقداره به سمت راست چسبیده و از راست دیگر فاصله‌ای ندارد.


دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند