صورت مسئله
گاهی در طراحی نیاز داریم تا تصویر پس زمینه را در گوشه ای متفاوت از گوشه بالا سمت و چپ, مثلا پایین و سمت راست عنصر قرار دهیم. با استفاده از ویژگی background-position می توان چنین کاری را انجام داد اما اگر بخواهیم تا فاصله ای بین تصویر پس زمینه و لبه های عنصر وجود داشته باشد و تصویر مانند مثال زیر به لبه عنصر نچسبد چه؟
شاید بگویید که می توان خود تصویر را طوری طراحی کرد که آن فاصله را در خود داشته باشد و آن قسمتش شیشه ای و شفاف باشد اما همه ما می دانیم که این روش چه از لحاظ نوع تصویر و حجم فایل و یا انعطاف پذیری طراحی روش درستی نیست.
زمانی که عنصر نگهدارنده عرض و ارتفاع ثابت دارد می توان از یک روش نچندان دل چسب (پلشت!) استفاده کرد و فاصله ای که نیاز داریم را از اندازه عنصر کم کنیم و حاصل کار را به عنوان مقدار ویژگی 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;
حال باید مطمئن شویم تا اگر مرورگری این روش را پشتیبانی نکرد نتیجه خیلی بد نباشد, که این کار خیلی هم سخت نیست در این مثال کافی است تا کلمات کلیدی right و bottom را به ویژگی background اضافه می کنیم. اینطوری اگر در مرورگری هم این روش پشتیبانی نشود حداقل خیلی به هم ریختگی مثل تصویر زیر نخواهیم داشت:
کافی است بصورت زیر عمل کنیم تا در مرورگرهای قدیمی تر حداقل نتیجه زیر را داشته باشیم:
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 است و طرحی که ما نیاز داریم را به ارمغان می آورد.
توجه داشته باشید که گاهی نیاز داریم که ترسیم پس زمینه در قسمت محتوا شروع شود و همچنین مقداری به سمت داخل و یا بیرون جابه جا شود در این مواقع می توانیم روش اول و دوم را با هم ترکیب کنیم.
راه حل سوم: استفاده از ()calc
اگر با این تابع آشنایی ندارید می توانید مطلب مربوط به آن را در همین سایت بررسی کنید.
حال اگر بخواهیم اولین مثال این مطلب را دوباره مرور کنیم در آن مثال گفته شد که می خواهیم پس زمینه از پایین 10 پیکسل فاصله و از راست 20 پیکسل فاصله داشته باشد با استفاده از این تابع می توانیم به روش زیر به نتیجه دلخواه برسیم:
background: url(css-tricks-logo.svg) no-repeat bottom right #313131;
background-position: calc(100% - 20px) calc(100% - 10px);
توجه داشته باشید که در این روش هم از کلمات کلیدی right و bottom جهت پشتیبانی مرورگرهای قدیمی تر استفاده کردیم.
سوال داری؟ برو به پنل پرسش و پاسخ