GIF ஐ அமைத்தல் ' கிராபிக்ஸ் பரிமாற்ற வடிவம் ” பின்னணிப் படமாக வடிவமைப்பில் பார்வைக்கு ஈர்க்கும் உறுப்பைச் சேர்க்கிறது. ஒரு பிராண்டின் காட்சி அடையாளத்தை உருவாக்க உதவும் ஒரு தயாரிப்பு அல்லது சேவையை டெவலப்பர்கள் தகவலை தெரிவிக்க அல்லது முன்னிலைப்படுத்த GIF அனுமதிக்கிறது. இருப்பினும், GIFகளின் பயன்பாடு வலைப்பக்கத்தை மூழ்கடிக்கவோ அல்லது முக்கிய உள்ளடக்கத்திலிருந்து பயனரை திசைதிருப்பவோ இல்லை என்பதை டெவலப்பர்கள் உறுதிசெய்ய வேண்டும்.

வலைப்பக்கத்தில் GIF ஐ பின்னணிப் படமாக அமைப்பதற்கான செயல்முறையை இந்தக் கட்டுரை விளக்குகிறது.

வலைப்பக்கத்தில் GIF ஐ பின்னணி படமாக அமைப்பது எப்படி?

GIF ஐ பின்னணிப் படமாக அமைப்பது, காட்சி கூறுகளைச் சேர்ப்பதன் மூலம் கண்ணைக் கவரும் கூறுகளை உருவாக்க உதவுகிறது.

விளையாட்டுத்தனம் அல்லது விசித்திர உணர்வை வெளிப்படுத்த விரும்பும் இணையதளங்கள் அல்லது குறிப்பிட்ட தயாரிப்பு அல்லது அம்சத்தை முன்னிலைப்படுத்த விரும்பும் பக்கங்களில் GIFகள் குறிப்பாக பயனுள்ளதாக இருக்கும். அதை அமைக்க, பின்னணி படமாக பின்வரும் எடுத்துக்காட்டுகளைப் பார்க்கவும்:

எடுத்துக்காட்டு 1: GIF ஐ ஒரு நிலையான பின்னணியாக அமைத்தல்

வலைப்பக்கத்தின் உள்ளடக்கத்தை உருவாக்க உதவும் HTML கூறுகள் ' <உடல்> ” குறிச்சொல். அதனால்தான், ' உடல் 'உறுப்பு மற்றும் அதன் மீது CSS பண்புகளைப் பயன்படுத்துதல். இது 'இன் அனைத்து HTML கூறுகளையும் பாதிக்கிறது <உடல்> ” குறிச்சொல்.

உதாரணமாக, '

'மற்றும்'

” குறிச்சொற்கள் வலைப்பக்கத்தின் உள்ளடக்கமாகப் பயன்படுத்தப்படுகின்றன. கீழே உள்ள குறியீடு துணுக்கைப் பார்க்கவும்:

< உடல் >
< h1 > GIF அமைக்கிறது என பக்கத்தில் ஒரு பின்னணி படம் h1 >
< ப > இந்த GIF சேர்க்கப்பட்டது என பயன்படுத்தி முழுப் பக்கத்திலும் ஒரு பின்னணி படம் 'பின்னணி-படம்' சொத்து. இந்த கட்டுரை Linuxhint மூலம் இயக்கப்படுகிறது. ப >
உடல் >

இப்போது, ​​'உடல்' HTML உறுப்பைத் தேர்ந்தெடுக்கவும் ' <பாணி> 'குறிச்சொல் அல்லது தனி' CSS வலைப்பக்கத்தில் ஸ்டைலிங்கைப் பயன்படுத்துவதற்கான கோப்பு:

உடல் {
பின்னணி படம்: url ( 'sea.gif' ) ;
பின்னணி-மீண்டும்: இல்லை-மீண்டும்;
பின்னணி அளவு: கவர்;
திணிப்பு:50px;
எழுத்துரு அளவு: x-பெரியது;
நிறம்: வெள்ளை;
}

மேலே உள்ள குறியீடு தொகுதியில்:

• • முதலில், ' url() '' என்ற பாதையை சேமிக்கும் முறை பயன்படுத்தப்படுகிறது. GIF ' கோப்பு. இந்த முறை CSS க்கு ஒரு மதிப்பாக அனுப்பப்படுகிறது ' பின்னணி படம் ”சொத்து.
  • அடுத்து, அமைக்கவும் ' இல்லை-மீண்டும் 'சிஎஸ்எஸ் மதிப்பாக' பின்னணி-மீண்டும் ” GIF கோப்பின் மறுமுறைக்கான சொத்து.
  • பின்னர், 'இன் மதிப்பை அமைக்கவும் கவர் 'சிஎஸ்எஸ்க்கு' பின்னணி அளவு 'கிடைக்கும் அனைத்து இடத்தையும் உள்ளடக்கும் சொத்து
  • அதன் பிறகு, மதிப்பை வழங்கவும் ' 50px 'மற்றும்' x-பெரிய 'சிஎஸ்எஸ்க்கு' திணிப்பு 'மற்றும்' எழுத்துரு அளவு ” பண்புகள், முறையே. இது உரையைச் சுற்றி இடைவெளியைச் சேர்க்கிறது மற்றும் எழுத்துரு அளவைப் பெரிதாக்குகிறது.

தொகுத்த பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:

மேலே உள்ள வெளியீடு வலைப்பக்கத்தில் பின்னணியாக ஒரு gif சேர்க்கப்பட்டுள்ளது என்பதைக் காட்டுகிறது.

எடுத்துக்காட்டு 2: GIF ஐ உருட்டக்கூடிய பின்னணியாக அமைத்தல்

ஆரம்பத்தில், இது போன்ற வலைப்பக்க உள்ளடக்கத்தை உருவாக்க HTML கட்டமைப்பை உருவாக்கவும்:

< div வர்க்கம் = 'கொண்டாய்' >
< h1 > GIF அமைக்கிறது என பக்கத்தில் ஒரு பின்னணி படம் h1 >
< ப > இந்த GIF சேர்க்கப்பட்டது என இதைப் பயன்படுத்தி முழுப் பக்கத்திலும் ஒரு பின்னணி படம் 'பின்னணி-படம்' சொத்து. இந்த கட்டுரை Linuxhint மூலம் இயக்கப்படுகிறது. ப >
div >

< div >
< h3 பாணி = 'நிறம்:வெள்ளை;' > வெளியே எழுதப்பட்ட உள்ளடக்கம் 'டிவி' உறுப்பு h3 >
div >

மேலே உள்ள குறியீட்டில்:

• • முதலில், பெற்றோர் '
    'குறிச்சொல்' என்ற வகுப்பில் பயன்படுத்தப்படுகிறது கொண்டிருக்கும் ”.
  • அடுத்து, பயன்படுத்தவும் ' h1 'மற்றும்' ப ” HTML உறுப்புகள் மற்றும் அவர்களுக்கு போலி உள்ளடக்கத்தை வழங்குகின்றன.
  • அதன் பிறகு, இன்னொன்றை உருவாக்கவும் '
    'மற்றும்' பயன்படுத்தவும்

    ” என்ற குறிச்சொல்லுக்கு போலித் தரவை வழங்கவும்.

இப்போது, ​​பின்வரும் CSS பண்புகளைச் செருகுவதன் மூலம் இணையப் பக்கத்தில் GIF ஐ பின்னணியாகச் சேர்க்கவும்:

.contai {
பின்னணி படம்: url ( sea.gif ');
பின்னணி-மீண்டும்: இல்லை-மீண்டும்;
பின்னணி அளவு: கவர்;
உயரம்: 100vh;
காட்சி: நெகிழ்வு;
align-items: மையம்;
நியாயப்படுத்து-உள்ளடக்கம்: மையம்;
flex-direction: column;
நிறம்: வெள்ளை;
எழுத்துரு அளவு: பெரியது;
text-align: மையம்;
திணிப்பு: 2ரெம்;
}

மேலே பயன்படுத்தப்பட்ட குறியீடு தொகுதியின் விளக்கம்:

• • முதலில், அமைக்கவும் ' பட-பாதை ”,” இல்லை-மீண்டும் t' மற்றும் ' கவர் 'சிஎஸ்எஸ் மதிப்பாக' பின்னணி படம் ”,” பின்னணி-மீண்டும் 'மற்றும்' பின்னணி அளவு ” பண்புகள், முறையே.
  • அடுத்து, மதிப்பை அமைக்கவும் 100vh 'மற்றும்' நெகிழ்வு 'சிஎஸ்எஸ்க்கு' உயரம் 'மற்றும்' காட்சி 'பண்புகள்.
  • அதன் பிறகு, CSS ஐப் பயன்படுத்தவும். நிறம் ”,” எழுத்துரு அளவு ”,” உரை-சீரமைப்பு 'மற்றும்' திணிப்பு உள்ளடக்கத்திற்கு ஸ்டைலிங்கைப் பயன்படுத்துவதற்கான பண்புகள்.

தொகுத்தல் செயல்முறையின் முடிவில், வலைப்பக்கம் இப்படி இருக்கும்:

வெளியீடு அதைக் காட்டுகிறது ' GIF ” முழுப் பக்கத்திலும் பின்னணிப் படமாகச் செருகப்பட்டுள்ளது.

முடிவுரை

வலைப்பக்கத்தில் GIF ஐ பின்னணி படமாக அமைக்க, CSS ' பின்னணி படம் 'சொத்து HTML இல் பயன்படுத்தப்படுகிறது' உடல் ”உறுப்பு. 'உடல்' உறுப்புக்கு பயன்படுத்தப்படும் CSS பண்பு தானாகவே அனைத்து கொண்டிருக்கும் உறுப்புகளுக்கும் பயன்படுத்தப்படும். அமைப்பதன் மூலம் ' 100vh ” உயரப் பண்புக்கான மதிப்பாக, ஸ்க்ரோலிங் விளைவையும் இயக்கலாம். இது பின்னணி gif ஐ உருட்டலுடன் நகர்த்த அனுமதிக்கிறது. வலைப்பக்கத்தில் பின்னணிப் படமாக GIF ஐ எவ்வாறு அமைப்பது என்பதை இந்தக் கட்டுரை விளக்கியுள்ளது.