امتیاز موضوع:
  • 13 رأی - میانگین امتیازات: 2.85
  • 1
  • 2
  • 3
  • 4
  • 5
تغییر رنگ و تصویر زمینه عناصر HTML با CSS
#1


[تصویر:  adobe-blueprint-css-icon.png]
تغییر رنگ و تصویر زمینه عناصر HTML با CSS

[تصویر:  Graphics-Painting-icon.png]
background-color
این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر استفاده کنیم.
در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم:


کد:
<p>متن بدون زمینه. <span style="background-color: yellow">این قسمت زمینه زرد دارد.</span></p>

این هم متن نهایی:


[تصویر:  13459881421.bmp]


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


کد:
<table border="1" style="background-color: #FFC0CB"><td>سلول اول</td>
<td>سلول دوم</td>
</table>


این هم جدول به دست آمده:


[تصویر:  13459883061.bmp]


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


کد:
<form action="some_script>نام : <input type="text" size="30" style="background-color: #009900">
</form>


این هم فرم آزمایشی ما:


[تصویر:  13459884671.bmp]


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



[تصویر:  Apps-background-icon.png]
background-image

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


کد:
background-image:url(آدرس تصویر مورد نظر)

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


کد:
<span style="background-image: url(http://www.neopersia.org/css/example1.gif)">برای این span از تصویر زمینه استفاده شده است.</span>

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


[تصویر:  13459887811.bmp]


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


کد:
<table border="1" style="background-image: url(http://www.neopersia.org/css/example1.gif)"><td>محتویات سلول اول</td>
<td>محتویات سلول دوم</td>
</table>


جدول به دست آمده مانند زیر است:


[تصویر:  13459890261.bmp]


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


کد:
<form><textarea rows="8" cols="60" style="background-image:url(http://www.neopersia.org/css/example1.gif)">
</textarea>
</form>


نتیجه را ملاحظه کنید:


[تصویر:  13459892431.bmp]
پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  تنظیمات موقعیت عکس زمینه عناصر صفحه با CSS انجمن مخ ها 0 233 26-08-2012، 07:00 PM
آخرین ارسال: انجمن مخ ها
  کار با تصویر زمینه در طراحی صفحات با استایل انجمن مخ ها 0 261 26-08-2012، 06:53 PM
آخرین ارسال: انجمن مخ ها
  تغییر موقعیت عناصر صفحه با استفاده از CSS انجمن مخ ها 0 217 25-08-2012، 10:57 PM
آخرین ارسال: انجمن مخ ها
  تنظیم حاشیه و فاصله از لبه در عناصر صفحه انجمن مخ ها 0 220 25-08-2012، 08:23 PM
آخرین ارسال: انجمن مخ ها
  نحوه ایجاد کادر برای عناصر صفحه با استفاده از استایل انجمن مخ ها 1 280 25-08-2012، 07:32 PM
آخرین ارسال: انجمن مخ ها
  وارد کردن CSS در تگهای HTML با استفاده از شناسه Style انجمن مخ ها 0 179 24-08-2012، 04:54 PM
آخرین ارسال: انجمن مخ ها

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان