آموزش CSS – آشنایی با Property یی تحت عنوان background-image در سی اس اس (CSS) (جلسه ۲۷)

پیش از این در دوره آموزش اچ تی ام ال (HTML) گفتیم که به چه شکل می توان تصاویر را وارد صفحات وب کرد. حال در این آموزش قصد داریم ببینیم که به چه شکل می توان از طریق سی اس اس این کار را انجام داد. برای این منظور کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن می نماییم:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>asrefonon</title>
   <link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
   <p>Background Image</p>
</body>
</html>

همانطور که در کد فوق می بینیم تگ پاراگرافی را حاوی عبارت Background Image به معنی “عکس پس زمینه” ایجاد کرده ایم. حال با استفاده از کدهای سی اس اس (CSS) اقدام به قرار دادن عکسی برای این تگ می نماییم:

p {
   width: 128px;
   height: 128px;
   background-color: #9cf;
   background-image:url(../images/facebookIcon.png);
}

همانطور که در کد فوق می بینیم، از آنجا که ابعاد تصویری که می خواهیم در این آموزش مورد استفاده قرار دهیم ۱۲۸ در ۱۲۸ است از این رو برای Property های width و height مقدار ۱۲۸ پیکسل را در نظر گرفته ایم. سپس رنگی مایل به رنگ آبی را هم با استفاده از دستور background-color اعمال کرده ایم. در خط آخر هم همانطور که ملاحظه می شود با استفاده از دستور background-image تصویری را به تگ <p> ضمیمه کرده ایم. می بینیم که بعد از علامت : کلید واژه url که مخفف واژگان Unoform Resource Locator است را نوشته و مقابل آن دو پرانتز قرار داده ایم.
در اینجا نکته بسیار مهمی را می بایست مد نظر قرار داده و آن هم اینکه مسیری که برای فایل عکس وارد می کنیم مسیری Relative یا اصطلاحاً “نسبی” به فایل سی اس اس است:

x1-background-image_in_css.jpg.pagespeed.ic.Y5QYy5KWfv

همانطور که در تصویر فوق ملاحظه می شود فولدری داریم تحت عنوان images که کلیه عکس های مربوط به آموزش از جمله فایل facebookIcon.png داخل آن قرار دارند. در تصویر فوق فولدری تحت عنوان css هم با یک فلش قرمز رنگ مشخص شده است که فایل main.css داخل آن قرار دارد. حال برای آنکه بتوانیم از داخل فایل main.css به فایل facebookIcon.png دسترسی پیدا کنیم ابتدا می بایست از فولدر css خارج شویم و بعد وارد فولدر images شویم. به منظور خارج شدن از یک فولدر در سی اس اس می بایست از دستور /.. استفاده کنیم. برای وارد وارد شدن به یک فولدر هم می بایست نام آن فولدر را بنویسیم و برای آنکه عکسی از داخل آن فولدر را انتخاب کنیم می بایست یک علامت / قرار داده و در نهایت نام فایل تصویری مد نظر خود را بنویسیم (شکل کامل شده مسیر در کد فوق مشاهده می شود). حال هر دو فایل اچ تی ام ال (HTML) و سی اس اس (CSS) را ذخیره کرده و فایل اچ تی ام ال خود را داخل مرورگری دلخواه باز می کنیم:

x2-background-image_in_css

همانطور که در تصویر فوق مشاهده می شود، علاوه بر نمایش داده شدن متنی که داخل تگ <p></p> بود، رنگ پس زمینه مایل به آبی و همچنین عکس مد نظر که مربوط به لوگوی فیسبوک است نمایش داده شده است. حال کدهای سی اس اس خود را به صورت زیر تغییر می دهیم:

p {
   width: 450px;
   height: 450px;
   background-color: #9cf;
   background-image: url(../images/facebookIcon.png);
}

همانطور که در کد فوق می بینیم ابعاد ۴۵۰ در ۴۵۰ پیکسل برای تگ پاراگراف در نظر گرفته شده است. اکنون مرورگر خود را به روز رسانی می کنیم:

x3-background-image_in_css

می بینیم که تصویر ما که دارای ابعداد ۱۲۸ در ۱۲۸ پیکسل است در جهت محورهای عمودی و افقی تکرار شده است تا جایی که کل فضای ۴۵۰ پیکسل پر شود. با استفاده از تگ دیگری تحت عنوان background-repeat می توان این تکرار عکس را مدیریت کرد. برای این منظور کدهای سی اس اس فوق را به صورت زیر ویرایش می کنیم:

p {
   width: 450px;
   height: 450px;
   background-color: #9cf;
   background-image: url(../images/facebookIcon.png);
   background-repeat:repeat-x;
}

می بینیم که با اضافه کردن دستور background-repeat و اختصاص مقدار repeat-x برای آن قصد داریم تا تصویر ما در جهت محور X یا همان محور افقی تکرار شود. مجدد مرورگر را به روز رسانی می کنیم:

x4-background-image_in_css

حال اگر بخواهیم که تصویر ما در جهت محور عمودی یا همان محور Y تکرار شود، می توان از مقداری repeat-y استفاده کرد. گاهی اوقات پیش می آید که نمی خواهیم تصویر ما در جهت هیچ محوری تکرار شود. برای این منظور کد خود را به شکل زیر ویرایش می کنیم:

p {
   width: 450px;
   height: 450px;
   background-color: #9cf;
   background-image: url(../images/facebookIcon.png);
   background-repeat:no-repeat;
}

همانطور که می بینیم از مقدار no-repeat استفاده کرده ایم. مجدد مرورگر خود را به روز رسانی می کنیم:

x5-background-image_in_css

یکی دیگر از اختیاراتی که در ارتباط با تصاویر در سی اس اس برای طراحان فراهم شده است تنظیم جایگاه عکس داخل تگ های اچ تی ام ال (HTML) می باشد. برای این منظور می بایست از Propertyیی تحت عنوان background-position استفاده کنیم. برای روشن شدن این مطلب، کدهای سی اس اس فوق را به صورت زیر تکمیل می کنیم:

p {
   width: 450px;
   height: 450px;
   background-color: #9cf;
   background-image: url(../images/facebookIcon.png);
   background-repeat:no-repeat;
   background-position:left top;
}

همانطور که می بینیم برای background-position ابتدا مقدار left را قرار داده سپس یک فاصله گذاشته ایم و مجدد مقدار top را نوشته ایم. اکنون برای مشاهده نتیجه این دستور تکمیلی، مجدد مرورگر خود را به روز رسانی می کنیم:

x5-background-image_in_css

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

p {
   width: 450px;
   height: 450px;
   background-color: #9cf;
   background-image: url(../images/facebookIcon.png);
   background-repeat:no-repeat;
   background-position:left;
}

مجدد مرورگر را به روز رسانی می کنیم:

x8-background-image_in_css

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

p {
   width: 450px;
   height: 450px;
   background-color: #9cf;
   background-image: url(../images/facebookIcon.png);
   background-repeat:no-repeat;
   background-position:100px 50px;
}

عدد ۱۰۰ پیکسل برای محور افقی و عدد دوم که ۵۰ پیکسل است برای محور عمودی در نظر گرفته خواهد شد. مجدد مرورگر را به روز رسانی می کنیم:

x9-background-image_in_css

لازم به ذکر است که همانند کلید واژگان سی اس اس (CSS) می توان یک مقدار عددی هم استفاده کرد:

p {
   width: 450px;
   height: 450px;
   background-color: #9cf;
   background-image: url(../images/facebookIcon.png);
   background-repeat:no-repeat;
   background-position:80px;
}

حال مرورگر را به روز رسانی می کنیم:

x10-background-image_in_css

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

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

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

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

توسط
تومان