سی ایس ایس میں امیج اسپرائٹس کا استعمال کیسے کریں؟

مندرجہ بالا کوڈ کے ٹکڑوں کی تفصیل:

• • سب سے پہلے، استعمال کریں '
    ' کے لیے ایک کنٹینر/ماحول بنانے کے لیے ٹیگ لگائیں' غیر ترتیب شدہ فہرست اور ' کا استعمال کرتے ہوئے تین فہرست اشیاء بنائیں <وہ> 'ٹیگ۔
    • اگلا، 'کی آئی ڈی تفویض کریں خالی '،' نصف 'اور' مکمل تین فہرست اشیاء کے لیے۔ یہ بعد میں بڑی تصویر کے کچھ حصے کو ظاہر کرنے کے لیے استعمال کیے جاتے ہیں۔

  مرحلہ 2: پہلی تصویر ڈسپلے کرنا

  ویب پیج پر خالی دل کو ظاہر کرنے کے لیے جو امیج سپرائٹ میں پہلی تصویر ہے۔ کا استعمال کرتے ہیں ' خالی آئی ڈی اور درج ذیل کوڈ داخل کریں:

  #خالی {
  چوڑائی: 157px؛
  اونچائی: 150px؛
  پس منظر: یو آر ایل ( .. / sprite.jpg ) 0 0 ;
  }

  
  کوڈز کی اوپر کی لائن میں:

  • • سب سے پہلے، سیٹ کریں ' چوڑائی 'اور' اونچائی ” اس تصویر کی جسے ڈویلپر ویب صفحہ پر ظاہر کرنا چاہتا ہے۔
    • یہ خصوصیات 'کی قدروں کو تفویض کی گئی ہیں۔ 157px 'اور' 150px مندرجہ بالا فراہم کردہ مثال کے مطابق، لیکن وہ مختلف جہتوں والی تصاویر کے لحاظ سے مختلف ہو سکتے ہیں۔
    • اگلا، کا راستہ فراہم کریں ' سپرائٹ 'تصویر کو' پس منظر ' جائیداد. اب سمت متعین کریں ' 0 'اور' 0 اور یہ امیج سپرائٹ کا پہلا حصہ دکھاتا ہے۔

  مندرجہ بالا لائن آف کوڈ کے نفاذ کے بعد، ویب صفحہ اس طرح نظر آتا ہے:

  
  مندرجہ بالا اسنیپ شاٹ سے پتہ چلتا ہے کہ امیج سپرائٹ سے پہلی تصویر ویب پیج پر ظاہر ہوتی ہے۔

  مرحلہ 3: درمیانی اور آخری تصویر کو ڈسپلے کرنا

  امیج اسپرائٹ سے درمیانی اور آخری تصویر والے حصے کو ظاہر کرنے کے لیے درج ذیل سی ایس ایس خصوصیات داخل کریں:

  #نصف {
  چوڑائی: 157px؛
  اونچائی: 150px؛
  پس منظر: یو آر ایل ( .. / sprite.jpg ) -462px 0px
  }
  #مکمل {
  چوڑائی: 157px؛
  اونچائی: 150px؛
  پس منظر: یو آر ایل ( .. / sprite.jpg ) -770px 0px
  }

  
  مندرجہ بالا کوڈ کے ٹکڑوں کی تفصیل:

  • • سب سے پہلے، منتخب کریں ' نصف آئی ڈی اور وہی سی ایس ایس پراپرٹیز داخل کریں جو اوپر کے مرحلے میں استعمال کی گئی ہیں۔
    • امیج سپرائٹ سے درمیانی تصویر دکھانے کے لیے، سمت تبدیل کریں یا بائیں جانب سے پیڈنگ تفویض کریں۔ مثال کے طور پر، بائیں طرف سے سمت 'پر سیٹ ہے منفی 462px '
    • اسی طرح، بائیں سے سمت متعین کرکے آخری تصویر دکھائیں -770px '

  مندرجہ بالا سی ایس ایس خصوصیات کے عمل کے بعد، ویب صفحہ اس طرح ظاہر ہوتا ہے:

  
  مندرجہ بالا اسنیپ شاٹ سے پتہ چلتا ہے کہ امیج اسپرائٹ کی تین تصاویر ویب پیج پر ظاہر کی گئی ہیں۔

  نتیجہ

  ' تصویر sprites ” ایک واحد بڑی تصویر ہے جو کولیج کی خصوصیت کی طرح متعدد چھوٹی تصاویر سے بنی ہے۔ اور بڑی تصویر کا کوئی بھی حصہ جو چھوٹی تصویر کی نمائندگی کرتا ہے ظاہر کیا جا سکتا ہے۔ کا استعمال کرتے ہوئے ضروریات کے مطابق ' پس منظر سی ایس ایس کے ذریعہ فراہم کردہ پراپرٹی۔ امیج سپرائٹ سے مخصوص تصویر کو ظاہر کرنے کے لیے، پہلے تصویر کی چوڑائی اور اونچائی سیٹ کریں۔ اس کے بعد، امیج اسپرائٹ سے تصویر کا صرف حصہ ظاہر کرنے کے لیے سمت کی قدروں کا استعمال کریں۔