آموزش CSS (قسمت ۱۴ : تغییر رنگ و تصویر زمینه) | خدمات کامپیوتری امداد133
خانه / کامپیوتر / اموزش / آموزش CSS (قسمت ۱۴ : تغییر رنگ و تصویر زمینه)

آموزش CSS (قسمت ۱۴ : تغییر رنگ و تصویر زمینه)

background-color : این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر استفاده کنیم.

در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم :

Capture

همینطور می توانیم از این ویژگی برای تغییر زمینه یک جدول یا div استفاده کنیم :

Capture

شما حتی می توانید از این ویژگی برای سلولهای یک جدول به صورت جداگانه استفاده کنید.

یک نمونه دیگر از موارد استفاده این ویژگی در طراحی فرم هاست. به مثال زیر توجه کنید :

Capture

توجه داشته باشید که در این ویژگی هم می توانیم از نام رنگ ها و هم از معادل هگزادسیمال آنها استفاده کنیم.

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

 


 

 

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

بعد از نام ویژگی باید از url برای مشخص کردن آدرس تصویر استفاده کنیم. آدرس تصویری که می خواهیم به عنوان زمینه استفاده کنیم نیازی نیست بین علامتهای نقل قول ( ” ) قرار گیرد ولی باید بین دو پرانتز قرار گیرد.
به یک مثال در این رابطه توجه کنید:

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

Capture

از این ویژگی می توان تقریباً برای همه اجزای صفحه استفاده کرد. در اینجا برای یک جدول از آن استفاده کرده ایم :

Capture

همانطور که برای textbox از رنگ زمینه استفاده کردیم برای آن از تصویر زمینه هم می توانیم استفاده کنیم. در اینجا از این ویژگی برای یک textarea استفاده می کنیم :

Capture
لازم به ذکر است که ما در اینجا از یک عکس کوچک و با رنگی واضح استفاده کردیم که به صور کامل مشخص باشد اما شما میتوانید از هر عکسی با هر اندازه و رنگی برای این کار استفاده کنید.

درباره ی nasimazadi

مطلب پیشنهادی

واحد پردازش مركزي CPU 

واحد پردازش مركزي CPU مدت زمان انجام يك كار بوسيله كامپيوتر، به عوامل متعددي بستگي …

پاسخ دهید