تعیین مکان پس زمینه به روش های مختلف

تعیین مکان پس زمینه با روش های انعطاف پذیر

صورت مسئله

گاهی در طراحی نیاز داریم تا تصویر پس زمینه را در گوشه ای متفاوت از گوشه بالا سمت و چپ, مثلا پایین و سمت راست عنصر قرار دهیم. با استفاده از ویژگی background-position می توان چنین کاری را انجام داد اما اگر بخواهیم تا فاصله ای بین تصویر پس زمینه و لبه های عنصر وجود داشته باشد و تصویر مانند مثال زیر به لبه عنصر نچسبد چه؟

 
تعیین مکان پس زمینه در css
 

شاید بگویید که می توان خود تصویر را طوری طراحی کرد که آن فاصله را در خود داشته باشد و آن قسمتش شیشه ای و شفاف باشد اما همه ما می دانیم که این روش چه از لحاظ نوع تصویر و حجم فایل و یا انعطاف پذیری طراحی روش درستی نیست.

زمانی که عنصر نگهدارنده عرض و ارتفاع ثابت دارد می توان از یک روش نچندان دل چسب (پلشت!) استفاده کرد و فاصله ای که نیاز داریم را از اندازه عنصر کم کنیم و حاصل کار را به عنوان مقدار ویژگی background-position تنظیم کنیم. اما این روش هم پویایی و انعطاف پذیری لازم را ندارد.

معمولا توسعه دهندگان از مقادیر درصدی, که کمی از 100% کمتر هستند مثل 95% و غیره استفاده می کنند. اما با CSS مدرن قطعا راه های بهتری وجود دارد.

 

راه حل اول: استفاده از background-position جدید

تا جایی که می دانیم می توان به background-position دو مقدار اختصاص داد اما در background-position توسعه یافته می توان برای هر کلمه کلیدی یک عدد تعیین کرد که آن عدد مشخص کننده فاصله تصویر از لبه مورد نظر است. (برای اطلاعات بیشتر در مورد این ویژگی به این مطلب مراجعه کنید)

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

 


  background: url(css-tricks-logo.svg) no-repeat #313131;
  background-position: right 20px bottom 10px;

 

background-position offset

 

حال باید مطمئن شویم تا اگر مرورگری این روش را پشتیبانی نکرد نتیجه خیلی بد نباشد, که این کار خیلی هم سخت نیست در این مثال کافی است تا کلمات کلیدی right و bottom را به ویژگی background اضافه می کنیم. اینطوری اگر در مرورگری هم این روش پشتیبانی نشود حداقل خیلی به هم ریختگی مثل تصویر زیر نخواهیم داشت:

 
no-support
 

کافی است بصورت زیر عمل کنیم تا در مرورگرهای قدیمی تر حداقل نتیجه زیر را داشته باشیم:

 
تعیین مکان پس زمینه در css
 


  background: url(css-tricks-logo.svg) no-repeat bottom right #313131;
  background-position: right 20px bottom 10px;

 

راه حل دوم: استفاده از background-origin

در خیلی مواقع می خواهیم تا فاصله پس زمینه به اندازه padding عنصر نگهدارنده باشد. خوب می توانیم از روش بالا استفاده کنیم اما این نحوه کدنویسی DRY نیست. به این معنی که هر دفعه padding تغییر کند باید آن تغییر را در چند جای دیگر هم انجام دهیم.

خوشبختانه راه حل دیگری نیز وجود دارد که این مشکل را برطرف می کند و آن هم استفاده از ویژگی background-origin است که در همین وب سایت می توانید اطلاعات بیشتر را در مورد این ویژگی بدست بیاورید.

حال کافی است به صورت زیر عمل کنیم:

 


  padding: 10px;
  background: url(css-tricks-logo.svg) no-repeat bottom right #313131;
  background-origin: content-box;

 

چون مقدار این ویژگی را برابر با content-box قرار دادیم شروع ترسیم تصویر در قسمت محتوا خواهد بود که چسبیده به ناحیه padding است و طرحی که ما نیاز داریم را به ارمغان می آورد.

 
استفاده از background-origin برای تعیین مکان پس زمینه
 

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

 

راه حل سوم: استفاده از ()calc

اگر با این تابع آشنایی ندارید می توانید مطلب مربوط به آن را در همین سایت بررسی کنید.

حال اگر بخواهیم اولین مثال این مطلب را دوباره مرور کنیم در آن مثال گفته شد که می خواهیم پس زمینه از پایین 10 پیکسل فاصله و از راست 20 پیکسل فاصله داشته باشد با استفاده از این تابع می توانیم به روش زیر به نتیجه دلخواه برسیم:

 


  background: url(css-tricks-logo.svg) no-repeat bottom right #313131;
  background-position:  calc(100% - 20px) calc(100% - 10px);

 

background-position offset

 
توجه داشته باشید که در این روش هم از کلمات کلیدی right و bottom جهت پشتیبانی مرورگرهای قدیمی تر استفاده کردیم.

منبع

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *