CSS Image Sprites In Hindi – Is Tutorial Me Hamane CSS Image Sprites Ko With Example Explain Kiya Hai Ki CSS Image Sprites Kya Hai Or Kyo Use Kiya Jata Hai ,Kaise Use Kiya Jati Etc. Topics Ham Is Tutorial Me Cover Karne Wale Hai |
CSS Image Sprites In Hindi
Contents
Sabase Pahle Ham Ye Samajhte Hai Ki CSS Image Sprites Aakhir Hai Kya Hai ?
What Is CSS Image Sprites In Hindi
Image Sprites Multiple Images Ka Collection Hota Hai Jo Ki Ek Single Image Me Store Kiye Jate Hai , Chalo Ek Example Se Samajhte Hai
Example : Suppose Apke Pas Koi Tin Images Hai Aur Aap Unhe Kisi Web Page Me Use Karna Chahte Ho ,Aap Photoshop Etc. Use Karke Un Tino Images Ko Combine Karke Un Tino Se Ek Single Image Banakar Unko Eksath Use Kar Skte Ho, Jise Image Sprites Kaha Jata Hai |
Ab Tak Ham Samajh Chuke Hai Ki Image Sprites Kya Hai , Ab Ham Janenge Ki Akhir CSS Image Sprites Ki Jarurt Kyo Hai|
Aapne Dekha Hoga Ki Jab Kisi Web Page Me Bahut Sari Images Hoti Hai To Vah Web Page Load Hone Me Time Leta Hai , Jisse Website Ka User Experience Kaharab Hone Lagta Hai , Jitni Jayada Images Hogi Web Page Load Hone Me Time Bhi Utna Jyada Hi Lega, Isliye Web Page Ka loading Time Kam Karne Ke Liye Ham In Images Ko Ek Single Image Bana Lete Hai Aur Fir Use Karte Hai |
Image Sprites – Simple Example In CSS In Hindi
Ab Ek Example Se Clear Karte Hai Ki CSS Image Sprites Use Kaise Karte Hai , Ham Ab Tin Images Lenge Aur Unhe Combine Kar Dete Hai |
Example :
Hamne Tin Images Intagram Logo, Facebook Logo And Youtube Logo Liye Hai Fir Unhe Ek Single Image Me Tino Images Ko Combine Kar Liya Jaisa Ki Aap Upar Image Me Dekh Skte Hai , Images Ko Combine Karne Ke Liye Aap Photoshop Use Kar Skte Hai |
How to use CSS Image Sprites In Hindi
Ab Man Lo Ki Apko In Tino Images Me Se Sirf Instagram Logo Ko Hi Use Karna Hai , To Aap CSS Properties Ki Help Se Ye Asani Se Kar Paoge
Example :
<!DOCTYPE html> <html> <head> <style> .insta{ height: 110px; background-image: url('sprites.png'); background-repeat: no-repeat; background-position: 0 0px; } </style> </head> <body> <div class="insta"></div> </body> </html>
Output :
Dekha Hamne Background Me Sprite Image Use Ki Hai Fir Bhi Ham Usme Se Keval Ek Image Use Kar Skte Hai |
Note : Sprite Image Ko Keval Background-Image Ke Rup Me Hi Set Kar Skte Hai |
Ab Agar Aap Insta Aur Youtube Image Ko Use Karna Chahte Ho To Is Tarah Se Kar Skte Ho –
Example :
<!DOCTYPE html> <html> <head> <style> .insta{ height: 110px; background-image: url('sprites.png'); background-repeat: no-repeat; background-position: 0 0px; } .yt{ height: 110px; background-image: url('sprites.png'); background-repeat: no-repeat; background-position: 0 -285px; } </style> </head> <body> <h2>Instagram Logo</h2> <div class="insta"></div> <h2>Youtube Logo</h2> <div class="yt"></div> </body> </html>
Output :
Upar Example Me Hamne Intagram Ke Liye background-position: 0 0px; Set Ki Hai Kyoki Instagram Ki Image , Sprite Image Me X-Axis Me 0 Px Se And Y-Axis Me 0px Se Start Ho Rhi Hai Isi Tarah Youtube Ke Liye Bhi Hamne background-position: 0 -285px; Set Ki Hai Kyoki Youtube Logo Sprite Image Me X-Axis Me 0px Se And Y-Axis Me -285px Se Start Ho Rhi Hai, – Isliiye Use Kiya Hai Kyoki Image Y-Axis Me Niche Ki Taraf Hai |
Ab Aap Agar Tino Images Use Karna Chahte Ho Aur Images Ka Order Phale Facebook Logo Phir Instagram And Last Me Youtube Logo Ko Rakhna Chahte Ho To Yah Is Tarah Kiya Ja Skta Hai
<!DOCTYPE html> <html> <head> <style> .insta{ height: 110px; background-image: url('sprites.png'); background-repeat: no-repeat; background-position: 0 0px; } .fb{ height: 110px; background-image: url('sprites.png'); background-repeat: no-repeat; background-position: 0 -140px; } .yt{ height: 110px; background-image: url('sprites.png'); background-repeat: no-repeat; background-position: 0 -285px; } </style> </head> <body> <h2>Facebook Logo</h2> <div class="fb"></div> <h2>Instagram Logo</h2> <div class="insta"></div> <h2>Youtube Logo</h2> <div class="yt"></div> </body> </html>
Output :
To Dekha Hamne Ek Hi Image Ko Kis Tarah Different-Different Tarike Se Use Kiya Hai |
Agar Aapko CSS Image Sprites Ko Lekar Koi Bhi Doubt Hai To Comment Me Puchh Skte Ho |