background یا پس زمینه در CSS
با نام و یاد خدای مهربون. سلام خدمت تمام کاربران عزیز
در جلسه قبل با انواع سلکتورها یا انتخابگرها در CSS آشنا شدیم . در این جلسه می خواهیم با خصوصیت background یا پس زمینه در CSS آشنا شویم.
در آموزش زیر به سوالات زیر پاسخ می دهیم:
- رنگ پس زمینه هر المان را چطور مشخص کنیم؟
- تصویر پس زمینه هر المان را چطور مشخص کنیم؟
- موقعیت و سایز تصویر پس زمینه را چطور مشخص کنیم؟
- و…
با ما همراه باشین ;-)
یکی از خصوصیاتی که در css مطرح می باشد و پر استفاده، خصوصیت background یا پس زمینه می باشد. در ابتدا یکی یکی آن ها را توضیح می دهیم سپس مثال می زنیم:
background-color
برای تعیین رنگ پس زمینه هر المان html می توان از این ویژگی استفاده کرد.مقدار رنگ را به سه شکل می توانیم مشخص کنیم :
- کد هگزادسیمال : رنگ را می توان با کد هگزادیسمال به شکل #rrggbb مشخص کرد که rr معرف رنگ قرمز،gg معرف سبز و bb معرف آبی می باشد.این مقادیر بین 00 تا FF قابل تغییر می باشد.
- (rgb(0-255,0-255,0-255,0-1 :در این شکل از مقداردهی پارامتر اول معرف رنگ قرمز ،پارامتر دوم معرف سبز و پارامتر سوم معرف آبی و پارامتر چهارم معرف شفافیت می باشد.
- اسم رنگ
background-image
این ویژگی تصویر پس زمینه یک المان را مشخص می کند. تصویر را با استفاده از url مشخص می کنیم.
background-position
این ویژگی مکان قرارگیری تصویر پس زمینه یک المان را مشخص می کند. مقدار این ویژگی می تواند به شکل های مختلفی باشد:
- به صورت جهت جهت( left top ، left center، left bottom، right top، right center، right bottom، center top، center center، center bottom ) : مقدار پیش فرض این خصوصیت top left (بالا-چپ) می باشد.
- به صورت درصدی (x : ( %X %Y مقدار افقی و y مقدار عمودی را مشخص می کند. مقدار پیش فرض این خصوصیت 0% 0% می باشد یعنی بالا-چپ صفحه. اگر بنویسیم 100% 100% یعنی پایین-راست صفحه. اگر یک مقدار بنویسیم ، مقدار دیگر به صورت پیش فرض 50% در نظر گرفته می شود.
- به صورت عددی (Xpx Ypx): مثلا 0 0 بالا-چپ صفحه می باشد.
background-size
اندازه تصویر پس زمینه را تنظیم می کند. مقدار این ویژگی می تواند به شکل های مختلفی باشد:
- به صورت عددی: Xpx Ypx
- به صورت درصدی: %X% Y
- مقدار cover: تصویر به اندازه مکان المان گسترش پیدا می کند.
- مقدار Contain: تصویر به اندازه المانی که در داخلش قرار دارد گسترش پیدا می کند البته با حفظ تناسب.
- مقدار auto: یعنی سایز خود تصویر(به صورت پیشفرض هم این مقدار می باشد)
background-repeat
این ویژگی تکرار تصویر پس زمینه را تنظیم می کند. به صورت:
- Repeat: تصویر در دو راستای عمودی و افقی تکرار شود.(پیشفرض همین مقدار می باشد)
- repeat-x : تصویر در راستای افقی تکرار شود.
- repeat-y: تصویر در راستای عمودی تکرار شود.
- no-repeat: تکرارنشود.
background-attachment
با این خصوصیت می توانیم مشخص کنیم که مکان تصویر پس زمینه با اسکرول خوردن صفحه حفظ شود یا خیر! مقادیری که می تواند داشته باشد:
- scroll: تصویر پس زمینه همراه با عنصر، اسکرول می شود(به صورت پیش فرض این مقدار را دارد)
- Fixed: تصویر پس زمینه ثابت می باشد و اسکرول در آن تاثیری ندارد.
- Local: تصویر پس زمینه همراه با با محتویات عنصر اسکرول می شود.
تمام مقادیری که برای هر کدام از این خصوصیت ها گفته شد را به صورت عملی تست کنید و نتیجه را ببینید . خب در ادامه با یک مثال به صورت خلاصه عملکرد این خصوصیات و بعضی مقادیر آن را خواهیم دید.
مثال:
کد html زیر را در سند خود وارد کنید:
<!DOCTYPE html>
<html lang=”fa” dir=”rtl”>
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
<meta charset=”utf-8″>
<title>
اینجا عنوان سایت است
</title>
</head>
</body>
<p>آشنایی با خصوصیت background </p>
</body>
</html>
کدهای css هم به شکل زیر وارد می کنیم. عملکرد خصوصیات گفته شده را روی المان کلی body مشاهده می کنیم:
body{
/*مشخص کردن رنگ پس زمینه*/
background-color: rgb(100,2,200);
/*مشخص کردن تصویر پس زمینه*/
background-image: url(‘1.jpg’);
/*مشخص کردن حالت تکرار تصویر*/
background-repeat:no-repeat ;
/*مشخص کردن مکان تصویر*/
background-position: center center;
/*مشخص کردن ثابت بودن یا حرکت کردن تصویر*/
background-attachment: fixed;
/*مشخص کردن سایز تصویر*/
background-size: 500px 500px;
/*مشخص کردن رنگ نوشته*/
color: #ffffff;
/*مشخص کردن سایز و فونت و ارتفاع نوشته*/
font: 20px/2000px tahoma;
}
نتیجه اجرا:
تکرار می کنم مثال ما همه مقادیر را در برنمیگیرد ، پس سعی کنید با دادن هر مقدار به خصوصیت ها تفاوت ها را درک کنید.
نکته: برای کوتاه شدن کدها می توانیم تمام مقادیر مربوط به پس زمینه یا background در CSS را به شکل زیر بنویسیم:
background: rgb(100,2,200) url(‘1.jpg’) no-repeat center center fixed 500px 500px ;
نکته : نحوه کامنت گذاشتن در سند css به صورت زیر می باشد:
/*
کامنت
*/
نحوه کامنت گذاشتن در سند html:
<!–
کامنت
–>
خب آموزش ما اینجا به پایان رسید. به صورت خلاصه با خصوصیت background یا پس زمینه در CSS آشنا شدیم که به صورت خلاصه می توانید ببینید:
property در css | ||||||
نام | مقادیر |
توضیح |
||||
background-color | کدهگزا دسیمال،اسم رنگ،rgb | تعیین رنگ پس زمینه هر المان html | ||||
background-image | — | تعیین تصویر پس زمینه یک المان | ||||
background-position | به صورت جهت جهت،عددی،درصدی | تعیین مکان قرارگیری تصویر پس زمینه یک المان | ||||
background-size | به صورت عددی،درصدی،cover،contain،auto | تعیین کننده اندازه تصویر پس زمینه | ||||
background-repeat | repeat،repeat-x،repeat-y،no-repeat | تعیین تکرار تصویر پس زمینه | ||||
background-attachment | scroll،fixed،local | تعیین مکان تصویر پس زمینه با اسکرول |
باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید ;-)
به این مقاله چند تا ستاره میدی؟[تعداد رای: 9 امتیاز: 3.9]
سلام
بهتره مثال قابل ویرایش هم بذارید برای هر جز از نوشته هاتون که همونطور که خودتون گفتید تمرینی هم برای کاربر باشه