CSS استایل بندی جلسه چهارم

CSS استایل بندی جلسه چهارم

 

خواص پس زمینه CSS برای تعریف افکت های پس زمینه یک عنصر استفاده می شود.

 

CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم css8

CSS استایل بندی جلسه چهارم

CSS استایل بندی:رنگ پس زمینه

خاصیت background-color ، رنگ پس زمینه یک عنصر را مشخص می کند.رنگ پس زمینه صفحه در انتخابگر بدنه تعریف می شود :

نتیجه در مرورگر به صورت زیر خواهد بود :

CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم Capture

 

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

 

یک مقدار HEX – مانند “# FF0000”

یک مقدار- RGB مانند “(RGB 255،۰،۰)”

یک نام رنگ – مانند “قرمز”

برای یک لیست کامل از مقادیر رنگ ممکن ، به مقادیر رنگ CSS مراجعه کنید. در نمونه زیر عناصر h1، p و div، رنگ پس زمینه های مختلفی دارند :

 

و نتیجه به صورت زیر دیده خواهد  شد.

CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم css2

CSS استایل بندی:تصویر پس زمینه

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

به مثال توجه کنید:

نتیجه به این صورت قابل مشاهده است:

CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم css3

 

تصویر پس زمینه – تکرار به صورت افقی یا عمودی

به طور پیش فرض، خاصیت background-image یک تصویر را در هر دو صورت افقی و عمودی تکرار می کند.برخی از تصاویر فقط باید به صورت افقی “یا” عمودی تکرار شود، در غیر اینصورت بطور عجیبی مشاهده می شوند ، مثل این:

 

css4 CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم css4

 

اگر تصویر فقط به صورت افقی تکرار شود (repeat-x) ، پس زمینه ظاهر بهتری خواهد داشت و دوباره کد را باسازی می کنیم و نتیجه  را باهم می بینیم:

 

css5 CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم css5

تصویر پس زمینه – تنظیم جایگاه و بدون تکرار

هنگامی از یک تصویر پس زمینه استفاده می کنید ، از تصویری استفاده کنید که مزاحم متن نشود.نمایش فقط یک بار تصویر با خاصیت background-repeat مشخص می شود :

و  در کد کامل  شده خواهیم داشت:

و نتیجه  به صورت زیز خواهد شد

css6 CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم css6

 

ما می خواهیم محل تصویر را تغییر دهیم ، به طوری که زیاد مزاحم متن نشود.موقعیت تصویر توسط background-position مشخص می کنیم به صورت زیر:

css7 CSS استایل بندی جلسه چهارم CSS استایل بندی جلسه چهارم css7

 

می توانید کد را به صورت کوتاه شده استفاده کنید به صورت زیر

 

 

 

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید