خصوصیت background-color
مثال (خصوصیت background-color)
تنظیم رنگ پس زمینه چند عنصر مختلف: (در انتهای این بیاموز، مثال های بیشتری را خواهید دید)
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
خودتان امتحان کنید »{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
تعریف و کاربرد
با استفاده از خصوصیت background-color می توانید رنگ پس زمینه یک عنصر را تنظیم نمایید.
پس زمینه یک عنصر، شامل padding و border نیز می شود. (اما margin جزو آن نیست)
| مقدار پیشفرض | transparent |
|---|---|
| ارث بری | خیر |
| نسخه | CSS1 |
| JavaScript ساختار | object.style.backgroundColor="#00FF00" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت background-color را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.
نکته ها و ترفندها
توجه: زمانی که از عکس یا رنگ پس زمینه استفاده می کنید، توجه داشته باشید که عکس مورد نظر باعث ناخوانایی متن نشود.
مقدارهای خصوصیت
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| color | برای مشاهده لیست رنگ ها، به لینک HTML Colors مراجعه نمایید. | نمایش دادن » |
| transparent | تعیین می کند که رنگ پس زمینه باید ناپیدا (transparent) باشد. transparent مقدار پیشفرض است. | نمایش دادن » |
| inherit | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
مثال - خودتان امتحان کنید
تنظیم background-color قسمتی از یک متن
این مثال، نشان می دهد که چگونه رنگ پس زمینه قسمتی از یک متن را تنظیم نماییم.
بیاموزهای مرتبط
Styling Backgrounds (بیاموز CSS)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 8312
