گروه مقاله : CSS
تاريخ انتشار : 1394/02/05 - 11:30
كد :249
چند عکس را که قبلا در کنار هم قرار داده اید و به یک عکس تبدیل کرده اید می توانید با استفاده از این روش و استفاده از کد های CSS از عکس های موجود در آن به صورت ظاهرا تکی و جدا از هم (دقیقا همان قسمتی که نیاز دارید) استفاده نمایید.
چند عکس را که قبلا در کنار هم قرار داده اید و به یک عکس تبدیل کرده اید می توانید با استفاده از این روش و استفاده از کد های CSS از عکس های موجود در آن به صورت ظاهرا تکی و جدا از هم (دقیقا همان قسمتی که نیاز دارید) استفاده نمایید.
اگر تعداد عکس های موجود در صفحه ی وب زیاد باشد، این موضوع منجر به دیر لود شدن صفحه وب و ارسال تعداد درخواست بیشتر بسمت سرور خواهد شد.
با استفاده از این روش تعداد درخواست های ارسالی به سمت سرور کاهش یافته و پهنای باند کمتری مصرف می شود.
مثلا به جای استفاده از 3 تصویر جداگانه ما از یک تصویر استفاده کرده ایم:
برای درک بهتر به مثال زیر توجه نمایید:
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img id="home" src="img_trans.gif"><br><br>
<img id="next" src="img_trans.gif">
</body>
</html>
در این مثال از یک تصویر کلی استفاده شده است و با استفاده از CSS و background-position قسمت مورد نظر از تصویر داخل تگ img که طول و عرض آن به اندازه تصویر مورد نظر است، نمایش داده می شود.
با استفاده از این روش ما می توانیم حتی یک navigation list ایجاد کنیم که شامل لیستی از تصاویر باشد.
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
از این روش می توان برای hover دادن نیز استفاده کرد. (hover selector زمانی استفاده می شود که ماوس روی عنصر مورد نظر باشد.)
» در این جا ما هر 3 تصویر را به همراه 3 تصویر دیگر که قرار است به عنوان hover قرار بگیرند، در یک تصویر قرار داده ایم و چون از 6 تصویر استفاده نشده ، بارگذاری تصاویر و اعمال hover با تاخیر انجام نمی شود.
به مثال زیر توجه نمایید:
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites_hover.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites_hover.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites_hover.gif') -91px 0;
}
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>