' உருவ உருவங்கள் ” என்பது பல ஒற்றைப் படங்களைக் கொண்ட ஒரு பெரிய படத்தை உருவாக்கும் ஒரு நுட்பமாகும். மேலும் பெரிய படத்தின் எந்தப் பகுதியையும் வடிவமைப்புத் தேவைகளுடன் ஒப்பிடலாம். டெவலப்பர்கள் பார்வைக்கு ஈர்க்கும் கூறுகளை சீராக உருவாக்க உதவுகிறது. ஐகான்கள், பொத்தான்கள் மற்றும் பிற வரைகலை கூறுகளுக்கு பட உருவங்கள் பயன்படுத்தப்படலாம். இந்த கட்டுரை CSS இல் பட உருவங்களைப் பயன்படுத்துவதற்கான படிப்படியான செயல்முறையை விளக்குகிறது.
ஐ எவ்வாறு பயன்படுத்துவது CSS இல் mage Sprites?
CSS இல், வலைப்பக்கத்தை ஏற்றும் நேரத்தைக் குறைக்க/குறைக்க டெவலப்பர்கள் பட உருவங்களைப் பயன்படுத்துகின்றனர். இது HTTP கோரிக்கைகளை குறைக்க உதவுகிறது, வேகமாக ஏற்றப்படுவதை உறுதி செய்கிறது மற்றும் பயனர் அனுபவத்தை மேம்படுத்துகிறது. உதாரணமாக, கீழே உள்ள எடுத்துக்காட்டைப் பார்வையிடவும்:
எடுத்துக்காட்டு: பட்டியல் உருப்படியில் பட ஸ்ப்ரைட்டைப் பயன்படுத்துதல்
இந்த எடுத்துக்காட்டில், ஒரு வரிசைப்படுத்தப்பட்ட பட்டியல் உருவாக்கப்பட்டு, ஒவ்வொரு பட்டியல் உருப்படியிலும், ஸ்ப்ரைட் படத்தின் ஒரு பகுதி திரையில் காட்டப்படும்.
முன்நிபந்தனை:
இமேஜ் ஸ்ப்ரிட்டிலிருந்து குறிப்பிட்ட படத்தைப் பெற, பயன்படுத்தப்படும் பட உருவத்தின் பரிமாணங்கள் குறிப்பாக முக்கியம். உதாரணமாக, ஒரு பரிமாணத்தைக் கொண்ட படம் ' 937×156 ” கீழே காட்டப்பட்டுள்ளது:
மேலே காட்டப்பட்டுள்ள படத்தின் சில பகுதியைக் காட்ட, கீழே உள்ள படிகளைப் பின்பற்றவும்:
படி 1: பட்டியல் உருப்படிகளை உருவாக்குதல்
கீழே உள்ள குறியீடு துணுக்கில் காணப்படுவது போல், வரிசைப்படுத்தப்படாத பட்டியல் வலைப்பக்கத்தில் உருவாக்கப்படுகிறது:
< உல் >காலியாக: < அந்த ஐடி = 'காலியாக' > அந்த >
பாதி: < அந்த ஐடி = 'பாதி' > அந்த >
முழு: < அந்த ஐடி = 'முழு' > அந்த >
உல் >
மேலே உள்ள குறியீடு துணுக்கின் விளக்கம்:
-
- முதலில், பயன்படுத்தவும் '
- அடுத்து, ஐடிகளை ஒதுக்கவும் காலியாக ”,” பாதி 'மற்றும்' முழு ” மூன்று பட்டியல் உருப்படிகளுக்கு. பெரிய படத்தின் ஒரு பகுதியைக் காண்பிக்க இவை பின்னர் பயன்படுத்தப்படுகின்றன.
- முதலில், பயன்படுத்தவும் '
படி 2: முதல் படத்தைக் காண்பித்தல்
இமேஜ் ஸ்ப்ரைட்டில் முதல் படமாக இருக்கும் வலைப்பக்கத்தில் வெறுமையான இதயத்தைக் காட்ட. பயன்படுத்த ' காலியாக ” ஐடி மற்றும் பின்வரும் குறியீட்டைச் செருகவும்:
#காலியாக {அகலம்: 157px;
உயரம்: 150px;
பின்னணி: url ( .. / sprite.jpg ) 0 0 ;
}
மேலே உள்ள குறியீடுகளின் வரிசையில்:
-
- முதலில், அமைக்கவும் ' அகலம் 'மற்றும்' உயரம் டெவலப்பர் இணையப் பக்கத்தில் காட்ட விரும்பும் படத்தின் ”.
- இந்த பண்புகள் 'இன் மதிப்புகளுக்கு ஒதுக்கப்பட்டுள்ளன. 157px 'மற்றும்' 150px ” மேலே கொடுக்கப்பட்ட எடுத்துக்காட்டின் படி, ஆனால் அவை வெவ்வேறு பரிமாணங்களைக் கொண்ட படங்களுடன் ஒப்பிடும்போது மாறுபடலாம்.
- அடுத்து, 'இன் பாதையை வழங்கவும் ஸ்பிரைட் 'படத்திற்கு' பின்னணி ”சொத்து. இப்போது, 'இன் திசையை அமைக்கவும் 0 'மற்றும்' 0 ” மற்றும் இது படத்தின் ஸ்ப்ரைட்டின் முதல் பகுதியைக் காட்டுகிறது.
மேலே உள்ள குறியீட்டை செயல்படுத்திய பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:
மேலே உள்ள ஸ்னாப்ஷாட், இமேஜ் ஸ்ப்ரைட்டின் முதல் படம் வலைப்பக்கத்தில் காட்டப்படுவதைக் காட்டுகிறது.
படி 3: நடுத்தர மற்றும் கடைசி படத்தைக் காண்பித்தல்
பட ஸ்ப்ரைட்டிலிருந்து நடுத்தர மற்றும் கடைசி படப் பகுதியைக் காட்ட, பின்வரும் CSS பண்புகளைச் செருகவும்:
#பாதி {அகலம்: 157px;
உயரம்: 150px;
பின்னணி: url ( .. / sprite.jpg ) -462px 0px
}
#முழு {
அகலம்: 157px;
உயரம்: 150px;
பின்னணி: url ( .. / sprite.jpg ) -770px 0px
}
மேலே உள்ள குறியீடு துணுக்கின் விளக்கம்:
-
- முதலில், ' பாதி ” ஐடி மற்றும் மேலே உள்ள படியில் பயன்படுத்தப்படும் அதே CSS பண்புகளைச் செருகவும்.
- இமேஜ் ஸ்ப்ரிட்டிலிருந்து நடுப் படத்தைக் காட்ட, திசையை மாற்றவும் அல்லது இடது பக்கத்திலிருந்து திணிப்பை ஒதுக்கவும். உதாரணமாக, இடமிருந்து வரும் திசையானது ' எதிர்மறை 462px ”.
- அதே வழியில், இடதுபுறத்தில் இருந்து திசையை அமைப்பதன் மூலம் கடைசி படத்தைக் காண்பி -770px ”.
மேலே உள்ள CSS பண்புகளை செயல்படுத்திய பிறகு, வலைப்பக்கம் இப்படி தோன்றும்:
மேலே உள்ள ஸ்னாப்ஷாட், இமேஜ் ஸ்ப்ரைட்டில் இருந்து மூன்று படங்கள் வலைப்பக்கத்தில் காட்டப்பட்டதைக் காட்டுகிறது.
முடிவுரை
' உருவ உருவங்கள் ” என்பது ஒரு பெரிய படமாகும், இது படத்தொகுப்பு அம்சத்தைப் போலவே பல சிறிய படங்களால் ஆனது. மேலும் சிறிய படத்தைக் குறிக்கும் பெரிய படத்தின் எந்தப் பகுதியும் காட்டப்படும். தேவைகளுக்கு ஏற்ப ' பின்னணி 'CSS வழங்கிய சொத்து. இமேஜ் ஸ்ப்ரிட்டிலிருந்து குறிப்பிட்ட படத்தைக் காட்ட, முதலில் படத்தின் அகலம் மற்றும் உயரத்தை அமைக்கவும். அதன் பிறகு, படத்தின் ஸ்பிரிட்டிலிருந்து படத்தின் பகுதியை மட்டும் காண்பிக்க திசைகளின் மதிப்புகளைப் பயன்படுத்தவும்.