خصوصیت background
مثال (خصوصیت background)
تنظیم کلیه خصوصیت های مربوط به پس زمینه، در یک مرحله:
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
خودتان امتحان کنید »{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت background را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.
توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.
تعریف و کاربرد
از خصوصیت background می توانید برای مختصر نویسی خصوصیت های مربوط به پس زمینه استفاده نمایید.
خصوصیت هایی که می توایند تنظیم نمایید:
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.
| مقدار پیشفرض | see individual properties |
|---|---|
| ارث بری | خیر |
| نسخه | CSS1 + new properties in CSS3 |
| JavaScript ساختار | object.style.background="red url(smiley.gif) top left no-repeat" |
نحوه استفاده
background: color position size repeat origin clip attachment image;
| مقدار | توضیحات | CSS |
|---|---|---|
| background-color | رنگ پس زمینه یک عنصر را تنظیم می کند. | 1 |
| background-position | شروع مکان قرارگیری عکس پس زمینه را تنظیم می کند. | 1 |
| background-size | اندازه تصویر پس زمینه را تنظیم می کند. | 3 |
| background-repeat | چگونگی تکرار عکس پس زمینه را تنظیم می کند. | 1 |
| background-origin | ناحیه قرار گیری عکس پس زمینه را مشخص می کند. (تصویر پس زمینه می تواند در قسمت محتوی (content-box)، لبه (border-box) و یا مکان (padding-box) قرار گیرد) | 3 |
| background-clip | ناحیه رنگ آمیزی پس زمینه را مشخص می کند. | 3 |
| background-attachment | مکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه | |
| background-image | عکس های پس زمینه را تنظیم می کند. | 1 |
بیاموزهای مرتبط
Styling Backgrounds (بیاموز CSS)
CSS3 Background (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 10081
دیدگاه‌ها
سلام
ممنونم از سایت آموزشیتون خیلی عالی دستتان درد نکنه