اینجا هستید :
خانه آموزش های طراحی وبسایت آموزش CSS نحوه کار با خاصیت background در زبان CSS همراه با مثال

نحوه کار با خاصیت background در زبان CSS همراه با مثال

نحوه کار با خاصیت background در زبان CSS همراه با مثال

بعد از آموزش در مورد نحوه نمایش شیوه نامه متن و نوشته که در جلسه قبلی مشاهده کردیم می خواهیم در این جلسه به یکی از خاصیت های مهم در زبان CSS یعنی خاصیت background اشاره کنیم.

خاصیت background یکی از خواص مهم و کاربردی هست که شما حتما در طراحی سایت به آن نیاز خواهید داشت و از استفاده خواهید کرد.

در این جلسه آموزشی می خواهیم شما را با این خاصیت آشنا کنیم و دستورات آن را مرور کنیم، در انتها هم مثال کاربردی از نحوه ی استفاده از خاصیت background را برای شما می آوریم که امیدواریم برای شما مفید باشد. پس با کدنویسی به زبان ساده همراه باشید.

سری آموزش های سی اس اس (CSS)

پس زمینه صفحه با خاصیت background

تعریف : از خاصیت پس زمینه ( background ) در CSS برای تعیین یک رنگ یا تصویر به عنوان پس زمینه یک عنصر مثل جدول یا صفحه استفاده می شود.

خاصیت background

خاصیت چند مقداری برای دریافت کلیه ویژگی های پس زمینه عنصر است که هر یک از ویژگی ها باید به ترتیب زیر در خاصیت background وارد شود :

background : [ backgronud-color ] [ background-image ] [ background-repeat ] [ background-attachement ] [background-position ]

توجه : هر یک از خواص فوق را می توان به صورت تکی نیز، تعریف و مقدار دهی کرد. به مثال های پایین صفحه دقت کنید.

در جدول زیر هر یک از ویژگی های فوق را بررسی می کنیم :

خاصیت background

نام خاصیت

نوع خاصیت

شرح

background-color

نام رنگ

rgb (r,g,b)

عدد هگزادسیمال

تعیین کننده یک رنگ به عنوان پس زمینه عنصر است . رنگ میتواند به روش های زیر تعیین شود :

نام رنگ مثل blue یا red

تعیین رنگ به وسیله تابع rgb به صورت زیر :

( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb

این تابع مقدار ۳ رنگ را با هم ترکیب کرده و یک رنگ را ایجاد می کند. که مقدار رنگ توسط عددی بین ۰ تا ۲۵۵ تعیین می شود ، که هر چه عدد بزرگتر باشد میزان آن رنگ در کل رنگ بیشتر خواهد بود.

Example : rgb (10,65,232)

نعیین رنگ به صورت عددی ترکیبی در مبنای ۱۶ هگزادسیمال :

میزان رنگ آبی میزان رنگ سبز میزان رنگ قرمز #

Example : #08FF00

background-image

URL
مسیر فایل

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

background-repeat

repeat
repeat-x
repeat-y
no-repeat

چنانچه عکس انتخابی به عنوان پس زمینه یک عنصر از اندازه آن عنصر کوچکتر باشد ، تعیین می کند که آیا با تکرار عکس در سطح پس زمینه عنصر ، کل آنرا بپوشاند یا خیر. که حالت های تکرار به صورت زیر می تواند باشد :

repeat : عکس در جهت افقی و عمودی تکرار خواهد شد.

repeat-x : عکس فقط در جهت محورها x ها یعنی افقی تکرار خواهد شد.

repaet-y : عکس فقط در جهت محور y ها یعنی عمودی تکرار خواهد شد.

no-repaet : عکس در هیچ جهتی تکرار نخواهد شد ، که انتخاب پیش فرض است.

background-attachement

scroll
fixed

تعیین می کند کند که آیا عکسی که به عنوان پس زمینه عنصر انتخاب شده است ،ثابت باشد و یا با حرکت عنصر در هنگام بالا و پایین رفتن صفحه ، آن عکس نیز حرکت کند.

این مسئله در مواردی مثل تعیین پس زمینه برای کل یک صفحه که در آن اندازه عکس بزرگتر از کل محدوده قابل نمایش در مرورگر است ، کاربرد دارد.

که ۲ حالت زیر را می تواند داشته باشد :

scroll : عکس با حرکت عنصر حرکت می کند.

– fixed : عکس ثابت بوده و با حرکت عنصر حرکت نمی کند.

background-position

top
bottom
center
left
right

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

top : بالای عنصر.

bottom : پایین عنصر.

center : در مرکز عنصر.

left : در سمت چپ عنصر.

right : در سمت راست عنصر.

مثال ۱ : در جدول زیر چندین حالت ویژگی از خاصیت background را در عنصر table و td مشاهده خواهید کرد :

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

نکته مهم : در مثال دوم هر یک از ویژگی های background را به صورت تکی مقدار دهی کرده ایم. تمام آن ویژگی ها را می توان به صورت زیر در خاصیت چند مقداری background نیز تعیین کنیم :

مثال ۳ : همچنین می توان به یک متن نیز رنگ پس زمینه داد ، به مثال زیر توجه کنید :
خب در انتهای این جلسه از سری آموزشی زبان CSS با خاصیت background آشنا شدید. در ادامه به خاصیت های دیگری از این زبان محبوب استایل دهی به صفحات وب خواهیم گفت.

درباره نویسنده

مدیریت علاقه دارم در زمینه آموزش های مباحث کامپیوتری و نرم افزاری هر دانش و تجربه ای دارم با کاربران عزیز به اشتراک بزارم... ♥
منتظر نظرات خوب شما هستیم!

هنوز هیچ دیدگاهی وجود ندارد

    • سلام , مهمان