ویژگی های تصویر زمینه

با استاندارد سازی هر چه بیشتر CSS3 در مرورگرهای مختلف می توان گفت دیگر زمانه استفاده از تصاویر تمام شده است اما همچنان بایستی از تصاویر زمینه استفاده کرد بنابراین باید به جای حذف آنها قابلیت های کنترلی بر روی آنها را افزایش داد، امروز قصد دارم به برخی از ویژگی های خاصیت background در CSS3 اشاره کنم.

هماهنگ سازی با مرورگر ها:

در این مبحث درباره background-size و background-origin خواهم نوشت که در تمامی مرورگرها (البته آخرین نسخه ارائه شده) به درستی عمل می کند یعنی در مرورگرهای فایرفاکس ، اینترنت اکسپلورر ، کروم ، اپرا و همینطور سافاری.

فکر می کنم مبحث قبل را خوب مطالعه کرده باشید بنابراین فرض می کنم شما با خاصیت background در مبحث قبلی آموزش CSS آشنا هستید. ;-)

 

اندازه تصویر زمینه یا background-size:

این خاصیت در واقع ابعاد تصویر زمینه شما را مشخص می کند. قبل از اینکه CSS3 به وجود بیاید اندازه تصویر زمینه بر اساس اندازه واقعی تصویر ایجاد شده در نظر گرفته می شد یعنی اگر شما یک تصویر با ابعاد 200 در 300 پیکسل داشتید اگر می خواستید تصویر را به صورت کوچکتر در قالب خاصیت background نمایش دهید بایستی اندازه آن را کوچک می کردید ولی با این دستور می توانید تصاویر بزرگ را با ابعاد کوچکتر نمایش دهید.

نکته : استفاده از این خاصیت تاثیری بر روی حجم لود تصویر شما نخواهد داشت اگر می خواهید تصویر را هم کوچک نمایش دهید و هم حجم کمی داشته باشد بایستی از نرم افزارهای تغییر اندازه تصویر همانند فتوشاپ استفاده کنید. ( در بخش آموزش گرافیک چنین مطلبی وجود دارد )

مزیت : شاید بعد از خواندن مطلب بالا با خود بگویید پس چه سودی دارد از این دستور استفاده کنم! دوست من شما می توانید با استفاده از این دستور یک تصویر را با ابعاد مختلف در قسمت های مختلف سایت خودتان استفاده کنید بدون آنکه درخواست جدیدی را برای فراخوانی فایل به سرور بفرستید! یعنی کم کردن http request ها که منجر به افزایش سرعت لود شما خواهد شد :-)

به مثال زیر توجه کنید : (در قسمت your image address می توانید آدرس تصویر مورد نظر خود را قرار بدهید.)

 

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
} 

نکته : شما می توانید اندازه تصویر را بر اساس درصد نیز وارد کنید.

 

موقعیت تصویر زمینه یا background-origin:

این خاصیت در واقع مشخص کننده مکان قرارگیری تصویر زمینه شما می باشد. توجه کنید که شما با خاصیت background-position تنها قادر هستید بر روی خود تصویر زمینه حرکت بکنید یعنی نقطه 0 برای محورهای x , y را تغییر بدهید ولی با این خاصیت شما قادر خواهید بود بدون تغییر مبدا محورها تصویر را تغییر مکان بدهید.

این خاصیت دارای 3 مقدار می باشد : content-box , padding-box , border-box

 می توانید با تغییر مقدار این خاصیت در مثال زیر تفاوت های این حالت را ببینید :

 

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

و اما یک ویژگی جدید که به کمک CSS3 محقق شده است و بسیار کارآمد می باشد تاااااااااداااااااااا D-: ، از این پس شما می توانید با استفاده از خاصیت background چندین تصویر زمینه برای یک المان استفاده کنید (راستش را بخواهید این ویژگی برای تصاویر با پسوند PNG کارآمد است). به مثال بسیار جالب زیر توجه کنید :

 

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

 

ناحیه کاربری