இந்த கையேட்டில், பின்னணி மற்றும் பின்னணி-வண்ண பண்புகளுக்கு இடையிலான வேறுபாட்டை விரிவாகக் கற்றுக்கொள்வோம்.
ஆரம்பிக்கலாம்!
CSS பின்னணி சொத்து
எந்த HTML உறுப்பின் பின்னணியையும் சரிசெய்ய, CSS ' பின்னணி 'சொத்து பயன்படுத்தப்படுகிறது. இது மேலும் எட்டு சொத்துக்களின் சுருக்கெழுத்து சொத்து, அதாவது நீங்கள் அனைத்தையும் ஒரே வரியில் பயன்படுத்தலாம். அந்த மற்ற பண்புகள்:
- பின்னணி நிறம்
- பின்னணி படம்
- பின்னணி-நிலை
- பின்னணி அளவு
- பின்னணி-மீண்டும்
- பின்னணி-தோற்றம்
- பின்னணி கிளிப்
- பின்னணி-இணைப்பு
தொடரியல்
பின்னணி சொத்தின் தொடரியல் இங்கே:
பின்னணி: வண்ணப் பட நிலை/அளவு மீண்டும் தோற்றம் கிளிப் இணைப்பு
மேலே குறிப்பிட்டுள்ள அனைத்து பண்புகளையும் ஒவ்வொன்றாக விளக்குவதற்கு செல்லலாம்.
CSS பின்னணி-வண்ண சொத்து
பயன்படுத்தி ' பின்னணி நிறம் ” சொத்து, நீங்கள் பின்னணியின் நிறத்தை அமைக்கலாம். HTML உறுப்புகளுக்குப் பின்னால் வண்ணம் தோன்றும்.
தொடரியல்
பின்னணி-வண்ண சொத்தின் தொடரியல்:
பின்னணி நிறம் : நிறம்என்ற இடத்தில் ' நிறம் ”, நீங்கள் கூறுகளுக்குப் பின்னால் தோன்ற விரும்பும் பின்னணியின் நிறத்தை அமைக்கலாம்.
உதாரணமாக
முதலில், HTML கோப்பில்,
HTML
< div >< h1 > LinuxHint < / h1 >
< ப > எங்கள் வலைத்தளத்திற்கு வரவேற்கிறோம் < / ப >
< / div >
CSS இல், div இன் உயரத்தை '' என சரிசெய்வோம் 100% ' இது முழுப் பக்கத்திலும் உரையின் எழுத்துரு அளவிலும் தோன்றும் வகையில் ' xx-பெரியது ”. அதன் பிறகு, பின்னணி நிறத்தை '' என அமைக்கவும் அக்வா ”.
CSS
div {உயரம் : 100% ;
எழுத்துரு அளவு : xx-பெரியது ;
பின்னணி நிறம் : அக்வா ;
}
கீழே கொடுக்கப்பட்டுள்ள படத்தில், பின்னணி வண்ணம் பயன்படுத்தப்படுவதைக் காணலாம்:
CSS பின்னணி-பட சொத்து
' பின்னணி படம் HTML கூறுகளின் பின்னணியாக ஒன்று அல்லது அதற்கு மேற்பட்ட படங்களை அமைக்க சொத்து பயன்படுத்தப்படுகிறது. வெவ்வேறு கூறுகளுக்கு வெவ்வேறு பின்னணி படங்களைச் சேர்க்க இந்த சொத்தை நீங்கள் பயன்படுத்தலாம்.
தொடரியல்
பின்னணி-பட சொத்தின் தொடரியல்:
பின்னணி படம்: url()இங்கே, நீங்கள் பின்னணியாக அமைக்க விரும்பும் படத்தின் பாதையை வாதமாக கொடுக்கவும் url() ”.
உதாரணமாக
முந்தைய எடுத்துக்காட்டின் தொடர்ச்சியாக, '' இல் பின்னணி படத்தைச் சேர்க்கவும் div ' வர்க்கம். படத்தின் url ஐ இவ்வாறு சேர்ப்போம் url(img.jpg) ”:
div {...
பின்னணி படம் : url ( img.jpg ) ;
}
கீழே கொடுக்கப்பட்டுள்ள வெளியீடு, பின்னணிப் படம் வெற்றிகரமாகச் சேர்க்கப்பட்டதைக் குறிக்கிறது:
படம் மீண்டும் மீண்டும் வருகிறது என்பதை நினைவில் கொள்க. இந்த சிக்கலை தீர்க்க, அடுத்த சொத்தை பார்க்கவும்.
CSS பின்னணி-மீண்டும் பண்பு
இணையப் பக்கத்தில் ஒரு படத்தை பின்னணியாகச் சேர்க்கும்போது, அது இயல்புநிலையாக மீண்டும் மீண்டும் செய்யப்படும். இது மீண்டும் நிகழ்வதைத் தவிர்க்கவும், உங்கள் விருப்பப்படி வடிவத்தை அமைக்கவும், ' பின்னணி-மீண்டும் 'சொத்து பயன்படுத்தப்படுகிறது.
தொடரியல்
பின்னணி-மீண்டும் பண்புகளின் தொடரியல்:
பின்னணி-மீண்டும் : மீண்டும் | மீண்டும்-x | மீண்டும்-ஒய் | இல்லை-மீண்டும்பின்னணி-மீண்டும் சொத்தின் கூறப்பட்ட மதிப்புகளின் விளக்கம் கீழே கொடுக்கப்பட்டுள்ளது:
- மீண்டும்: செங்குத்து மற்றும் கிடைமட்டமாக இரு திசைகளிலும் படத்தை மீண்டும் செய்ய இது பயன்படுத்தப்படுகிறது.
- மீண்டும்-x: படத்தை மீண்டும் மீண்டும் கிடைமட்டமாக அமைக்க இது பயன்படுகிறது.
- மீண்டும்-y: இது படத்தின் செங்குத்து மறுநிகழ்வைக் குறிப்பிடுகிறது.
- மீண்டும் நிகழாதது: படம் மீண்டும் வருவதைத் தவிர்க்க இது பயன்படுகிறது.
உதாரணமாக
இங்கே, பின்னணி-மீண்டும் சொத்தின் மதிப்பை '' என அமைப்போம் இல்லை-மீண்டும் ”:
div {...
பின்னணி-மீண்டும் : இல்லை-மீண்டும் ;
}
மேலே வழங்கப்பட்ட குறியீட்டின் விளைவு கீழே கொடுக்கப்பட்டுள்ளது. படம் மீண்டும் மீண்டும் வரவில்லை என்பதை நீங்கள் பார்க்கலாம்:
CSS பின்னணி-நிலை சொத்து
பின்னணி படத்தின் நிலையை அமைக்க, ' பின்னணி-நிலை ”சொத்து பயன்படுத்தப்படுகிறது. இடது மேல், இடது மையம், இடது கீழ், வலது மேல், வலது மையம் மற்றும் பல போன்ற வெவ்வேறு நிலைகளில் படத்தை சரிசெய்ய இது உங்களை அனுமதிக்கிறது.
தொடரியல்
பின்னணி-நிலை சொத்தின் தொடரியல்:
பின்னணி-நிலை : மதிப்புஎன்ற இடத்தில் ' மதிப்பு ”, படத்தின் நிலையை நீங்கள் குறிப்பிடலாம்.
உதாரணமாக
இங்கே, நாம் பின்னணி-நிலையை அமைப்போம் ' மையம் ”:
div {...
பின்னணி-நிலை : மையம் ;
}
கீழே உள்ள வெளியீட்டில், படம் பக்கத்தின் மையத்தில் தோன்றும்:
CSS பின்னணி அளவு சொத்து
பின்னணி படத்தின் அளவை அமைக்க, ' பின்னணி அளவு ”சொத்து பயன்படுத்தப்படுகிறது.
தொடரியல்
பின்னணி அளவு பின்வரும் தொடரியல் உள்ளது:
பின்னணி அளவு : நீளம்|கவர்பின்புல அளவு சொத்தின் மதிப்புகளின் விளக்கம் பின்வருமாறு:
- நீளம்: பின்னணி படத்தின் அகலம் மற்றும் உயரத்தை சரிசெய்ய இது பயன்படுகிறது.
- கவர்: முழு பின்னணியிலும் பின்னணி படத்தை சரிசெய்ய இது பயன்படுத்தப்படுகிறது.
உதாரணமாக
பின்புலத்தின் அளவை இவ்வாறு அமைப்போம். 100% 'உயரம் மற்றும்' 80% ”அகலம்:
div {...
பின்னணி அளவு : 100% 80% ;
}
குறிப்பிட்ட பரிமாணங்களின் அடிப்படையில் படத்தின் அளவு மாற்றப்பட்டிருப்பதைக் காணலாம்:
CSS பின்னணி தோற்றம் சொத்து
' பின்னணி-தோற்றம் 'பின்னணிப் படத்தின் பொருத்துதல் பகுதியைச் சரிசெய்ய சொத்து பயன்படுத்தப்படுகிறது. படம் இயல்பாக மேல் இடது மூலையில் சரி செய்யப்பட்டது.
தொடரியல்
பின்னணி மூலப்பொருளின் தொடரியல்:
பின்னணி-தோற்றம் : திணிப்பு பெட்டி| எல்லைப் பெட்டி | உள்ளடக்க பெட்டிபின்னணி மூலச் சொத்தின் மதிப்புகள் கீழே விவரிக்கப்பட்டுள்ளன:
- திணிப்பு பெட்டி: திணிப்பு விளிம்பிற்கு ஏற்ப பின்னணி படத்தின் நிலையை சரிசெய்யப் பயன்படுத்தப்படும் பின்னணி-மூலச் சொத்தின் இயல்புநிலை மதிப்பாகும்.
- எல்லைப் பெட்டி: படத்தின் பார்டர்-பாக்ஸின் படி படத்தை அமைக்க இது பயன்படுகிறது.
- உள்ளடக்க பெட்டி: படத்தின் உள்ளடக்கத்திற்கு ஏற்ப பின்னணி படத்தை அமைக்க இது பயன்படுகிறது.
குறிப்பு: பின்புல-இணைப்புச் சொத்தின் மதிப்பு '' என அமைக்கப்பட்டால், பின்புல மூலப் பண்பு செயல்படாது சரி செய்யப்பட்டது ”.
உதாரணமாக
முதலில், கொள்கலனைச் சுற்றி ஒரு எல்லையை உருவாக்கவும். இங்கே, நாம் முந்தைய உதாரணத்தைத் தொடர்வோம் மற்றும் திணிப்பு மதிப்பை ' என அமைப்போம் 10px ”. அதன் பிறகு, பார்டர் அகலத்தை ' 15px ”, ஸ்டைல் மேடு ', மற்றும் வண்ணம் ' rgb(1, 68, 68) ”. இறுதியில், பின்னணி மூலச் சொத்தின் மதிப்பை இவ்வாறு ஒதுக்குவோம் ' உள்ளடக்க பெட்டி ”:
div {...
திணிப்பு : 10px ;
எல்லை : 15px மேடு rgb ( 1 , 68 , 68 ) ;
பின்னணி-தோற்றம் : உள்ளடக்க பெட்டி ;
}
மேலே வழங்கப்பட்ட குறியீட்டின் விளைவு கீழே கொடுக்கப்பட்டுள்ளது. டிவியின் உள்ளடக்கத்திற்கு ஏற்ப படத்தின் நிலை அமைக்கப்பட்டிருப்பதை நீங்கள் பார்க்கலாம்:
CSS பின்னணி-கிளிப் சொத்து
' பின்னணி கிளிப் ”உறுப்பின் பின்னணி நிறத்தில் சொத்து செயல்படுகிறது. உறுப்பின் பேடிங், அதன் பார்டர் மற்றும் அதன் உள்ளடக்கம் போன்ற ஒரு உறுப்பைத் தாண்டி பின்னணி நிறம் எவ்வளவு தூரம் நீண்டுள்ளது என்பதைக் கட்டுப்படுத்த இது உங்களை அனுமதிக்கிறது.
தொடரியல்
பின்னணி-கிளிப் சொத்தின் தொடரியல்:
பின்னணி-தோற்றம் : எல்லைப் பெட்டி | திணிப்பு பெட்டி | உள்ளடக்க பெட்டிபின்னணி மூலச் சொத்தின் மதிப்புகள் கீழே விவரிக்கப்பட்டுள்ளன:
- எல்லைப் பெட்டி: இது எல்லைக்குப் பின்னால் பின்னணி நிறத்தை அமைக்கப் பயன்படுத்தப்படும் பின்னணி-மூலச் சொத்தின் இயல்புநிலை மதிப்பாகும்.
- திணிப்பு பெட்டி: உறுப்பின் திணிப்பு பெட்டியில் நிறத்தை சரிசெய்ய இது பயன்படுத்தப்படுகிறது.
- உள்ளடக்க பெட்டி: உறுப்பின் உள்ளடக்கத்திற்கு ஏற்ப பின்னணி நிறத்தை அமைக்க இது பயன்படுகிறது.
உதாரணமாக
முந்தைய உதாரணத்தைத் தொடர்வோம் மற்றும் பார்டர் ஸ்டைலின் மதிப்பை ' புள்ளியிடப்பட்ட ”பின்னணி-கிளிப் சொத்தை புரிந்து கொள்ள. அதன் பிறகு, பின்னணி-கிளிப் சொத்தின் மதிப்பை '' என அமைப்போம் திணிப்பு பெட்டி ”:
div {...
பின்னணி கிளிப் : திணிப்பு பெட்டி ;
}
எல்லை விளிம்பு முடிவடையும் போது வெள்ளை பின்னணி நிறம் காட்டப்படுவதை வெளியீடு குறிக்கிறது:
CSS பின்னணி-இணைப்பு சொத்து
' பின்னணி-இணைப்பு பக்கத்தை ஸ்க்ரோல் செய்யும் போது நடத்தை அல்லது படத்தை சரிசெய்ய சொத்து பயன்படுத்தப்படுகிறது. அதன் நடத்தை மற்ற உறுப்புகளுடன் ஸ்க்ரோலிங் அமைக்கப்படலாம் அல்லது நிலையானது.
தொடரியல்
பின்னணி-இணைப்பு சொத்தின் தொடரியல்:
பின்னணி-இணைப்பு : மதிப்புநீங்கள் பின்னணி இணைப்பின் மதிப்பை இவ்வாறு அமைக்கலாம். சரி செய்யப்பட்டது 'பின்னணி படத்தை சரிசெய்ய அல்லது' சுருள் ” படத்தை பக்கத்துடன் உருட்ட அனுமதிக்க.
குறிப்பு: இயல்பாக, பின்னணி-இணைப்புச் சொத்தின் மதிப்பு இவ்வாறு அமைக்கப்பட்டுள்ளது சுருள் ”.
நாம் ஸ்க்ரோல் செய்யும் போது சேர்க்கப்பட்ட பின்னணிப் படம் நிலையானதாக இல்லை என்பதைக் காணலாம். இப்போது இந்த சிக்கலை சரிசெய்வோம்.
அவ்வாறு செய்ய, பின்னணி-இணைப்பு சொத்தின் மதிப்பை ' சரி செய்யப்பட்டது ”:
div {...
பின்னணி-இணைப்பு : சரி செய்யப்பட்டது ;
}
படம் சரி செய்யப்பட்டது என்பதை நிரூபிக்கும் முடிவு இங்கே:
இப்போது, பின்னணி மற்றும் பின்னணி-வண்ண பண்புகளுக்கு இடையிலான ஒப்பீட்டை நோக்கி செல்க.
CSS பின்னணி எதிராக பின்னணி நிறம்
கொடுக்கப்பட்ட அட்டவணை பின்னணி மற்றும் பின்னணி-வண்ண பண்புகளை அவற்றின் அம்சங்களின் அடிப்படையில் வேறுபடுத்தும்:
| அம்சங்கள் | CSS பின்னணி | CSS பின்னணி நிறம் |
| வகை | இது ஒரு சூப்பர் சொத்து. | இது பின்னணி சொத்தின் துணை சொத்து. |
| செயல்பாடு | இது அனைத்து பின்னணி பண்புகளையும் அமைக்கிறது. | இது பின்னணி நிறத்தை மட்டுமே அமைக்கிறது. |
| சரகம் | இது அனைத்து பின்னணி பண்புகளையும் ஆதரிக்கிறது | இது பின்னணி-வண்ண பண்புகளை மட்டுமே ஆதரிக்கிறது |
| நிலை | பின்னணியில் பல மதிப்புகளைச் சேர்க்க வேண்டியிருக்கும் போது, அதைப் பயன்படுத்துவது எளிது. அனைத்து பின்னணி பண்புகளின் மதிப்புகளையும் ஒரே நேரத்தில் அமைக்கலாம். | நீங்கள் ஒரு பின்னணி நிறத்தை மட்டுமே சேர்க்க வேண்டியிருக்கும் போது இதைப் பயன்படுத்தலாம். |
| தொடரியல் | பின்னணி: மதிப்புகள் (மதிப்புகள் பிஜி-வண்ணம், பிஜி-படம் மற்றும் பிற பண்புகள்) |
பின்னணி நிறம்: நிறம் |
பின்னணி-வண்ண பண்புகள் பின்னணி பண்புகளிலிருந்து எவ்வாறு வேறுபடுகின்றன என்பது விளக்கப்பட்டுள்ளது.
முடிவுரை
CSS” பின்னணி 'பண்பு என்பது வண்ணம், படம், நிலை, அளவு, தோற்றம் மற்றும் பல போன்ற பல பின்னணி மதிப்புகளை ஒரே நேரத்தில் அமைக்கப் பயன்படும் சுருக்கெழுத்து சொத்து. மறுபுறம், ' பின்னணி நிறம் ” பின்னணியில் வண்ணத்தை சேர்க்க மட்டுமே பயன்படுத்தப்படுகிறது. இந்த வழிகாட்டியில், CSS பின்னணி சொத்து மற்றும் CSS பின்னணி-வண்ண சொத்து ஆகியவற்றுக்கு இடையேயான வேறுபாட்டை நாங்கள் விவாதித்தோம்.