آموزش CSS

آموزش CSS - پس زمینه

خصوصیت Background در CSS به منظور تعریف سبک پس زمینه برای المان( عناصر) مورد استفاده قرار می گیرد.

خصوصیت های پس زمینه:

زبان CSS خصوصیت های متعددی را برای سبک دهی پس زمینه یک المان همچون رنگ پس زمینه(background-color )، تصویر پس زمینه(background-image )، تکرار پس زمینه(background-repeat )؛ الحاقات پس زمینه(background-attachment ) و موقعیت پس زمینه(background-position) فراهم می آورد.  این بخش نحوه استفاده از این خصوصیت ها را برای  تنظیم سبک های مختلف پس زمینه توضیح می دهد.پس در ادامه همراه ما باشید.

رنگ پس زمینه - Background Color

خصوصیت رنگ پس زمینه(Background Color) برای تنظیم رنگ یک المان مورد استفاده قرار می گیرد. مثال زیر را به دقت مطالعه کنید. همانطور که در مثال زیر مشاهده می کنید، می توانید به کمک این خصوصیت رنگ پس زمینه را برای یک صفحه از سایت تنظیم کنید.

body {
    background-color: #f0e68c;
}

رنگ ها در زبان برنامه نویسی CSS اغلب به کمک روش های زیر مشخص می شوند:

  •   مقدار هگزا دسیمال همچون "#ff0000"
  •   مقدار RGB همچون "rgb(255,0,0)"
  •   نام رنگ  دلخواه همچون قرمز یا آبی

تصویر پس زمینه - Background Image

خصوصیت background-image  به شما کمک می کند یک تصویر را به عنوان پس زمینه المان HTML خود تنظیم کنید. به مثال زیر توجه کنید. این مثال نحوه تنظیم تصویر به عنوان پس زمینه یک صفحه را نشان می دهد:

body {
    background-image: url("leaf.jpg");
}

تکرار پس زمینه - Background Repeat

به طور پیش فرض، خصوصیت background-image  تصویر را هم به صورت عمودی و هم افقی تکرار می کند. اما اگر می خواهید این روند را تغییر دهید می توانید از خصوصیت background-repeat  استفاده کنید. این خصوصیت به شما کمک می کند کنترل بیشتری بر روی نحوه تکرار تصویر پس زمینه  داشته باشید.  در چنین شرایطی می توانید تصویر پس زمینه را به صورت  عمودی( محور Y)، افقی( محور X)؛ در هر دو جهت تکرار نمایید. مثال زیر نحوه تنظیم گرادیان پس زمینه برای یک صفحه از سایت را با تکرار تصویر برش خورده به صورت افقی نشان می دهد.

body {
    background-image: url("gradient.png");
    background-repeat: repeat-x;
}

Background Attachment

خصوصیت Background Attachment تعیین می کند که آیا تصویر پس زمینه صرف نظر از سایر موارد ثابت بوده یا همراه با بقیه صفحه حرکت داشته باشد و جا به جا گردد. به مثال زیر توجه کنید:

body {
    width: 250px;
    height: 200px;
    overflow: scroll;
    background-image: url("recycle.jpg");
    background-attachment: fixed;
}

موقعیت پس زمینه - Background Position

خصوصیت Background Position برای کنترل موقعیت تصویر پس زمینه مورد استفاده قرار می گیرد. اگر موقعیت تصویر مشخص نشود، تصویر به صورت پیش فرض در موقعیت بالا و سمت چپ المان نشان داده می شود. مثال زیر را ببینید:

body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
}

در مثال زیر، تصویر پس زمینه در گوشه سمت راست و بالا قرار دارد و موقعیت آن توسط خصوصیت background-position  به خوبی مشخص شده است.

body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
    background-position: 100% top;
}

خصوصیت Background Shorthand

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

body {
    background-color: #f0e68c;
    background-image: url("smiley.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
}

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

body {
    background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px;
}

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

background: color image repeat attachment position;

اگر یکی از مقادیر خصوصیت پس زمینه مفقود بوده یا به کمک نماد مختصر نویسی مشخص نشده باشد، مقدار پیش فرض برای آن خصیصه مورد استفاده قرار خواهد گرفت.

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

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

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

لطفا چند لحظه منتظر بمانید ...