آموزش کامل Image Sprites در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل Image Sprites در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
Image Sprites در CSS چیست؟
بطور کلی به مجموعه ای از چندین تصویر / عکس که درون یک تصویر واحد قرار میگیرند Image Sprites می گوییم ، یعنی در واقع اینجوری بگیم به چندین تصویر کوچک که در کنار همدیگر قرار دارند عکس اسپریت شده می گوییم.
خب حالا به چه درد میخوره این Image Sprites ؟! بیشترین فایده ای که میتونه برامون داشته باشه یکی افزایش سرعت بارگذاری صفحه وبمون هست و دیگری کم کردن تعداد درخواست ها به سمت سرور می باشد.
خب بلاخره من فقط یک عدد عکس دارم و چون داخل همون یک عدد عکس ، تعدادی عکس دیگر وجود دارد پس طبیعتا سرعت لود شدن صفحه وب من میتونه خیلی بیشتر باشه نسبت به صفحه ای که قرار است چندین عکس واحد درش لود شه.
خب حالا بریم تا یک نمونه از Image Sprites با همدیگه ببینیم، تصویر زیر نمونه ای از یک تصویر اسپریت شده می باشد ، پس یعنی الان ۱ عدد تصویر داریم ولی داخل همین ۱عدد تصویر ، ۲عدد تصویر داریم.
پس در ادامه من میخوام ۲ تصویر موجود در تصویر زیر را بصورت جداگانه در صفحه وبم به نمایش درآوردم، لطفا در ادامه و تا پایان این جلسه با من همراه باشید.
Free-Learn
آموزش کامل Image Sprites در CSS
خب حالا من میخوام با استفاده از دستورات CSS از سمت چپ اولین تصویر (یعنی این
) و بعدش دومین تصویر ( یعنی این
) رو در صفحه وبم به نمایش درآورم.
پیشنهاد میکنم حتما آموزش کار با پس زمینه ها یا Backgrounds در CSS را مشاهده نمایید.
در دستورات زیر ویژگی به اسم background-position وجود دارد که با استفاده از این ویژگی موقعیت یا محل قرار گیری تصویر رو مشخص میکنیم، مقدار اول یعنی فاصله از سمت چپ به راست تا محل تصویر و مقدار دوم یعنی فاصله از سمت بالا به پایین تا محل تصویر.
مثال شماره ۱ : استفاده از تگ IMG ( با استفاده از صفت ID )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> img#t1{ width:40px; height:50px; background-image:url('demo_img_sprites.png'); background-position:0 0; background-repeat:no-repeat; } img#t2{ width:125px; height:50px; background-image:url('demo_img_sprites.png'); background-position:-60px 0; background-repeat:no-repeat; } </style> |
مثال شماره ۲ : استفاده در تگ DIV ( با استفاده از صفت CLASS )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> div.t1{ width:40px; height:50px; background-image:url('demo_img_sprites.png'); background-position: 0 0; background-repeat:no-repeat; } div.t2{ width:125px; height:50px; background-image:url('demo_img_sprites.png'); background-position:-60px 0; background-repeat:no-repeat; } </style> |
Free-Learn
مثال های بیشتر از Image Sprites در CSS
مثال شماره ۱ : ایجاد یک منو ( Navigation Bar ) با استفاده از تکنیک Image Sprites در CSS
|
1 2 3 4 5 6 7 8 |
<body> <ul id="navlist"> <li id="m1"><a href="files/user.html"></a></li> <li id="m2"><a href="files/car.html"></a></li> </ul> </body> |
مثال شماره ۲ : ایجاد یک لیست از آیتم ها با استفاده از تکنیک Image Sprites در CSS – روش دیگری برای قرار دادن عکس / تصویر بجای گلوله های مشکی آیتم های یک لیست وجود دارد که پیشنهاد میکنم از آن روش استفاده نمایید.
پیشنهاد میکنم آموزش نحوه قرار دادن تصویر بجای گلوله های مشکی توپُر پیش فرض یک لیست ،را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 |
<body> <ul id="mylist"> <li id="item1">Salam</li> <li id="item1">Khobi?</li> <li id="item1">Salam</li> <li id="item1">Khobi?</li> </ul> </body> |
