یک مثال ساده از تکه تکه کردن عکس
بجای استفاده از سه عکس، می توانیم از یک عکس تنها استفاده کنیم (img_navsprites.gif):
با CSS می توانیم فقط بخشی از عکس که نیاز داریم را نمایش دهیم.
در مثال زیر، مشخص می کنیم که کدام بخش از عکس "img_navsprites.gif" نمایش داده شود:
مثال (مثال تکه تکه کردن عکس)
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
خودتان امتحان کنید »{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
توضیح مثال:
- به خاطر اینکه ویژگی src در تگ </ img> نمی تواند خالی باشد آنرا با عکس "img_trans.gif" مقداردهی می کنیم که یک عکس 1*1 و کاملاً شفاف است.
- باید عرض و ارتفاع بخشی از تصویر اصلی که می خواهیم نمایش داده شود را مشخص کنیم. (width:46px و height:44px)
- در قسمت آخر یعنی background:url(img_navsprites.gif) 0 0 ، عکس پس زمینه و مکان آنرا مشخص می کند. (ابتدا فاصله از سمت چپ و بعد فاصله از بالا)
این آسان ترین روش استفاده از تکه تکه کردن تصاویر است، در قسمت بعد استفاده از آن در لینک ها و افکت Hover را توضیح می دهیم.
