خبرگزاری آیصد (جدیدترین و جذاب ترین اخبار ایران و جهان)

سی اس اس ۳ چندین خاصیت جدید برای پس زمینه ( بک گراند ) ارایه کرده است.

یک نکته که دوست داشتم به آن اشاره کنم که کسی گیج نشود خاصیت را من به معنی Properties می گویم.

در این مقاله راجع به background-size و background-origin و همچنین استفاده از تصاویر خواهم گفت.

Firefox 3.6 و پایینتر از خاصیت background-size و background-origin پشتیبانی نمی کند و باید از پیشوند -moz- برای استفاده از این خاصیتها استفاده کرد.

همچنین Safari 4 توسط پیشوند -webkit- می تواند خاصیتهای جدید پس زمینه در سی اس اس ۳ را پشتیبانی کند.

IE9 , Firefox 4  و Chrome , Safari 5 , Opera  همگی خاصیتهای جدید پس زمینه سی اس اس ۳ را پشتیبانی می کنند.

خاصیت background-size

خاصیت background-size سایز تصاویر پس زمینه را مشخص می کند.

قبل از سی اس اس ۳ اندازه تصویر پس زمینه بر اساس اندازه واقعی تصویر باید تنظیم می شد ولی در سی اس اس ۳ ما امکان این را خواهیم داشت که اندازه تصویر پس زمینه را خودمان تعیین کنیم.

جهت تعریف اندازه در این خاصیت ما می توانیم هم از مقدار پیکسل برای سایز استفاده کنیم و هم از مقدار درصد % . فقط توجه داشته باشید در صورتی که از درصد % استفاده میکنید مقدارها کاملا وابسته به طول و عرض صفحه اصلی که تصویر بر روی آن قرار می گیرند دارد.

مثال :

div
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Old Firefox */
background-size:80px 60px;
background-repeat:no-repeat;
}

در مثال بالا سایز تصویر زمینه تعریف شده است.

مثال ۲ :

div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Old Firefox */
background-size:100% 100%;
background-repeat:no-repeat;
}

در مثال  بالا تصویر به اندازه ۱۰۰% کشیده شده است که کل پس زمینه را پر کند.

پارامترهای خاصیت background-size  به شرح ذیل می باشند.

خاصیت background-origin

خاصیت background-origin موقعیت قرار گیری تصویر پس زمینه را در صفحه سایت ما تعیین می کند.

تصویر پس زمینه می تواند در یکی از سه موقعیت content-box, padding-box, border-box قرار بگیرد.  تصویز زیر موقعیتها را نشان می دهد.

مثال ۳ :

div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

در مثال بالا موقعیت تصویر زمینه content-box قرار داده شده است.

پارامترهای خاصیت background-origin به شرح ذیل می باشند :

استفاده از چند تصویر در پس زمینه در Css3

ما در سی اس اس ۳ می توانیم از چندین تصویر برای پس زمینه استفاده کنیم.

مثال ۴ :

body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

در مثال بالا از دو تصویر برای پس زمینه استفاده شده است.