CSS இல் பின்னணி படத்தை எவ்வாறு செயல்படுத்துவது?

CSS என்பது அடுக்கு நடைத்தாள்களின் சுருக்கமாகும். இது வலைப்பக்கங்களை மாற்றும் திறனைக் கொண்ட எளிய மற்றும் சக்திவாய்ந்த வடிவமைப்பு மொழியாகும். எளிமையான சொற்களில், வலைப்பக்கங்களை வழங்கக்கூடியதாக மாற்றுவதற்கான செயல்முறையை இது நெறிப்படுத்துகிறது மற்றும் பயனர்களின் உதவியுடன் ஈர்க்கிறது . இந்த கட்டுரையில், பின்வரும் வரிசையில் CSS இல் பல்வேறு பின்னணி படத்தை எவ்வாறு செயல்படுத்தலாம் என்பதைப் புரிந்துகொள்வோம்:

• CSS பண்புகளில் பின்னணி படம்
• CSS இல் பின்னணி படம்
• பின்னணி மீண்டும் செய்யவும்
• பின்னணி இணைப்பு
• பின்னணி நிலை
• CSS அளவில் பின்னணி படம்
• பின்னணி நிறம்

CSS பண்புகளில் பின்னணி படம்

படத்தின் நடத்தைகள் மற்றும் நிலைகளை கட்டுப்படுத்த பல பண்புகள் பயன்படுத்தப்படுகின்றன. இந்த பண்புகள்:

• பின்னணி-படம்
• பின்னணி-மீண்டும்
• பின்னணி-இணைப்பு
• பின்னணி-நிலை
• பின்னணி அளவு
• பின்னணி நிறம்

இந்த ஒவ்வொரு பண்புகளையும் நாம் அறிந்துகொள்வோம், மேலும் அவற்றை எப்போது, ​​எப்படிப் பயன்படுத்துவது என்பதைப் பார்ப்போம்.

CSS இல் பின்னணி படம்

தி பின்னணி-படம் பெயர் குறிப்பிடுவது போல் ஒரு வலைப்பக்கத்தில் உள்ள ஒரு உறுப்பு மூலம் பின்னணி படத்தைக் குறிக்கவும் அமைக்கவும் பயன்படுத்தப்படுகிறது. இயல்புநிலையாக ஒரு பின்னணி-படம் ஒரு தனிமத்தின் மேல் இடது மூலையில் வைக்கப்படுகிறது.

தொடரியல்: பின்னணி-படம்: url | எதுவுமில்லை | நேரியல்-சாய்வு | ரேடியல்-சாய்வு

உடல் {பின்னணி-படம்: url ('apple.jpg')}
url ஐப் பயன்படுத்தி பின்னணி
 

அளவுருக்களைப் புரிந்துகொள்வோம்:

• url: இந்த அளவுருவுக்கான உள்ளீடு எந்தவொரு படத்திற்கும் ஒரு கோப்பு பாதையை அல்லது பின்னணியாக அமைக்க வேண்டிய படத்திற்கான URL ஐ குறிப்பிட அனுமதிக்கிறது. ஒன்றுக்கு மேற்பட்ட படங்களை அறிவிக்க, URL கள் கமா டிலிமிட்டருடன் பிரிக்கப்படுகின்றன.

உடல் {பின்னணி-படம்: url ('apple.jpg')}

• எதுவுமில்லை: இது சொத்தின் இயல்புநிலை மதிப்பு மற்றும் அதன் மதிப்பு குறிப்பிடப்பட்டால் பின்னணி படம் எதுவும் வழங்கப்படாது.

உடல் {பின்னணி: எதுவுமில்லை}

• நேரியல்-சாய்வு (): பின்னணி படம் ஒரு நேரியல் சாய்வுக்கு அமைக்கப்பட்டுள்ளது. இந்தச் சொத்துக்கு குறைந்தபட்சம் இரண்டு வண்ணங்களாவது குறிப்பிடப்பட வேண்டும், அதாவது மேலிருந்து கீழாக.

உடல் {பின்னணி-வண்ணம்: # 001 பின்னணி-படம்: நேரியல்-சாய்வு (வெள்ளை 15%, வெளிப்படையான 16%), நேரியல்-சாய்வு (வெள்ளை 15%, வெளிப்படையான 16%) பின்னணி அளவு: 60px 60px பின்னணி-நிலை: 0 0, 30px 30px}

• ரேடியல்-சாய்வு (): பின்னணி படம் ஒரு ரேடியல் சாய்வுக்கு அமைக்கப்பட்டுள்ளது. இந்த சொத்துக்கு குறைந்தபட்சம் இரண்டு வண்ணங்களாவது குறிப்பிடப்பட வேண்டும், அதாவது மையத்திலிருந்து விளிம்புகளுக்கு.

உடல் {பின்னணி-வண்ணம்: # 001 பின்னணி-படம்: ரேடியல்-சாய்வு (வெள்ளை 15%, வெளிப்படையான 16%), ரேடியல்-சாய்வு (வெள்ளை 15%, வெளிப்படையான 16%) பின்னணி அளவு: 60px 60px பின்னணி-நிலை: 0 0, 30px 30px}

• மீண்டும்-நேரியல்-சாய்வு (): இது ஒரு நேரியல் சாய்வு மீண்டும் செய்கிறது. நேரியல்-சாய்வு மீது நாம் மேலே பார்த்த அதே உதாரணத்தை மீண்டும்-நேரியல்-சாய்வுக்காகப் பயன்படுத்துவோம், வித்தியாசத்தைப் பார்ப்போம்.

உடல் {பின்னணி-வண்ணம்: # 001 பின்னணி-படம்: மீண்டும் மீண்டும்-நேரியல்-சாய்வு (வெள்ளை 15%, வெளிப்படையான 16%), மீண்டும் மீண்டும்-நேரியல்-சாய்வு (வெள்ளை 15%, வெளிப்படையான 16%) பின்னணி அளவு: 60px 60px பின்னணி-நிலை : 0 0, 30px 30px}

• மீண்டும் மீண்டும்-ரேடியல்-சாய்வு (): இது ஒரு ரேடியல் சாய்வு மீண்டும் செய்கிறது .ஒரு ரேடியல் சாய்வில் நாம் மேலே பயன்படுத்திய அதே உதாரணத்தை ஆராய்வோம்.

உடல் {பின்னணி-வண்ணம்: # 001 பின்னணி-படம்: மீண்டும் மீண்டும்-ரேடியல்-சாய்வு (வெள்ளை 15%, வெளிப்படையான 16%), மீண்டும் மீண்டும்-ரேடியல்-சாய்வு (வெள்ளை 15%, வெளிப்படையான 16%) பின்னணி அளவு: 60px 60px பின்னணி-நிலை : 0 0, 30px 30px}

குறைவடையும் பின்னணி

பின்னணி வண்ணத்தை குறைவடையும் விருப்பமாகச் சேர்ப்பது தொழில்முறை உதவிக்குறிப்பாக எப்போதும் அறிவுறுத்தப்படுகிறது. பின்னணி படங்கள் ஏற்றப்படாமல் இருக்கும்போது அல்லது வளரும் போது நாம் அமைக்கும் சாய்வு பின்னணி அதைப் பார்க்கும் சில பழைய உலாவிகளால் ஆதரிக்கப்படாதபோது இது மீட்புக்கு வருகிறது.

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

உடல் {பின்னணி: url (apple_lost.jpg) இளஞ்சிவப்பு}

பல பின்னணி

ஜாவாவில் mysql தரவுத்தளத்தை எவ்வாறு இணைப்பது

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

பல பின்னணி படங்களுக்கான எடுத்துக்காட்டு கீழே:

உடல் {பின்னணி-படம்: url ('small-heart.jpg'), url ('background.jpg')}

பின்னணி மீண்டும் செய்யவும்

ஒரு படத்தின் மீண்டும் நடத்தை வரையறுக்க பின்னணி-படத்துடன் பின்னணி-மீண்டும் சொத்து பயன்படுத்தப்படுகிறது. பின்னணி படம் மீண்டும் மீண்டும் செய்யப்படுமா, எப்படி என்பதை இது குறிப்பிடுகிறது. இயல்புநிலையாக பின்னணி-படம் செங்குத்தாகவும் கிடைமட்டமாகவும் மீண்டும் மீண்டும் செய்யப்படுகிறது.

சாத்தியமான மதிப்புகள்:

• மீண்டும்- படம் கிடைமட்டமாகவும் செங்குத்தாகவும் மீண்டும் நிகழ்கிறது
• இல்லை மீண்டும் - படம் மீண்டும் இல்லை
• மீண்டும்- x - படம் கிடைமட்டமாக மீண்டும் மீண்டும் செய்யப்படுகிறது
• மீண்டும்-ஒய் - படம் செங்குத்தாக மீண்டும் மீண்டும் செய்யப்படுகிறது
• விண்வெளி- இடைவெளி அல்லது இடைவெளிகளுடன் கூட படம் மீண்டும் மீண்டும் செய்யப்படுகிறது.
• சுற்று - அவற்றுக்கிடையே எந்த இடைவெளியும் இல்லாமல் அந்தப் பகுதியை நிரப்ப படம் மீண்டும் மீண்டும் செய்யப்படுகிறது.

பின்னணி-மீண்டும் சொத்துக்கான CSS தொடரியல்:

பின்னணி-மீண்டும்: மீண்டும் | மீண்டும்-எக்ஸ் | மீண்டும்-ஒய் | இல்லை-மீண்டும் | இடம் | சுற்று

உடல் {பின்னணி-படம்: url ('heart.png'), url ('background.png') பின்னணி-மீண்டும்: மீண்டும்-ஒய், மீண்டும்-எக்ஸ் பின்னணி-வண்ணம்: #ffffff}

பின்னணி இணைப்பு

தி பின்னணி-இணைப்பு உள்ளடக்கம் உருட்டப்படுவதால் படம் உருட்ட வேண்டுமா இல்லையா என்பதைக் குறிப்பிடுவதற்கு பின்னணி-படத்துடன் சொத்து பயன்படுத்தப்படுகிறது. இது பின்னணி படத்தை சரி செய்ய வேண்டும் அல்லது உலாவி சாளரக் காட்சியுடன் ஆவணத்துடன் உருட்ட வேண்டும் என்பதைக் குறிக்கிறது. இயல்புநிலை மதிப்பு உருட்ட வேண்டும்.

சாத்தியமான மதிப்புகள்:

• உருள் - பக்கத்துடன் பட உருட்டும்.
• சரி - படம் பக்கத்துடன் உருட்டாது

பின்னணி-இணைப்பிற்கான CSS தொடரியல்:

பின்னணி-இணைப்பு: உருள் | சரி செய்யப்பட்டது

உடல் {பின்னணி-படம்: url ('heart.png'), url ('background.png') பின்னணி-மீண்டும்: இடம், சுற்று}

பின்னணி நிலை

தி பின்னணி-நிலை பின்னணி படத்தின் இருப்பிடம் அல்லது நிலையை குறிக்க சொத்து பயன்படுத்தப்படுகிறது. சாத்தியமான மதிப்புகள்:

• மேல்
• சரி
• கீழே
• இடது
• மையம்
• இந்த மதிப்புகளின் சேர்க்கை (எ.கா., இடது மேல்)

பின்னணி-நிலைக்கான CSS தொடரியல்:

பின்னணி-நிலை: மேல் | வலது | இடது | கீழ் | மையம்

உடல் {பின்னணி-படம்: url ('heart.png') பின்னணி-மீண்டும்: மீண்டும் மீண்டும் இல்லை பின்னணி-இணைப்பு: உருள்}

CSS அளவில் பின்னணி படம்

இந்த சொத்து மிகவும் பயனுள்ள ஒன்றாகும், ஏனெனில் இது பின்னணி படத்தின் அளவைக் கட்டுப்படுத்த அனுமதிக்கிறது. இந்தச் சொத்துடன் நாம் பயன்படுத்தக்கூடிய பல்வேறு சேர்க்கைகள் உள்ளன, அதன்படி முடிவுகளைப் பெறலாம். இயல்புநிலை மதிப்பு தானாக உள்ளது.

பின்வரும் மதிப்புகளை பின்னணி அளவுடன் பயன்படுத்தலாம்:

• ஆட்டோ
• படத்தின் நீளம் மற்றும் உயரம் மற்றும் அகலம் எ.கா. 20px 40px.
• ஒரு சதவீதம்- உயரம் மற்றும் படத்தின் அகலம் ஒரு சதவீதமாக w.r.t பெற்றோர் உறுப்பு எ.கா. 50% 50%.
• மையம்- படத்தை மையமாக சீரமைக்கவும்
• கவர், பின்னணி பகுதியால் படத்தை முழுவதுமாக மறைக்க அளவிடுதல்.
• படத்தின் உண்மையான உயரம் மற்றும் அகலம் வரை பொருந்தும் வகையில் அளவிடுதல்.

பின்னணி-நிலைக்கான CSS தொடரியல்:

பின்னணி அளவு: மதிப்பு

உடல் {பின்னணி-படம்: url ('heart.png'), url ('background.png') பின்னணி-மீண்டும்: மறுபடியும் மறுபடியும் இல்லை, பின்னணி அளவை மீண்டும் செய்யவும்: 400px 150px, கவர்}

உடல் {பின்னணி-படம்: url ('heart.png'), url ('background.png') பின்னணி-மீண்டும்: மறுபடியும் மறுபடியும் இல்லை, பின்னணி அளவை மீண்டும் செய்யவும்: கொண்டிருங்கள், 400px 150px}

int ஜாவாவிற்கு இரட்டிப்பாக்கு

பின்னணி நிறம்

CSS இல் உள்ள அனைத்து பண்புகளிலும் இது மிகவும் எளிது. இது பக்கத்தின் பின்னணிக்கு திட வண்ணங்களைப் பயன்படுத்துகிறது. இந்த சொத்தின் மதிப்பை வண்ணங்களில் (எ.கா. சிவப்பு, நீலம் போன்றவை), ஹெக்ஸ் மதிப்பு மற்றும் RGB மதிப்பு ஆகியவற்றில் குறிப்பிடலாம்.

பின்னணி-வண்ணத்திற்கான CSS தொடரியல்:

பின்னணி நிறம்: மதிப்பு

உடல் {பின்னணி-படம்: url (small-heart.jpg) பின்னணி-வண்ணம்: # 22a8e3}

இது பின்னணியுடன் நாம் பயன்படுத்தக்கூடிய அனைத்து பண்புகளையும் முடிக்கிறது. எங்கள் ஆர்ப்பாட்டத்தில் பார்த்ததைப் போல பண்புகளின் வெவ்வேறு சேர்க்கைகளை நாம் எப்போதும் முயற்சி செய்யலாம்.

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

எங்கள் பாருங்கள் இது பயிற்றுவிப்பாளர் தலைமையிலான நேரடி பயிற்சி மற்றும் நிஜ வாழ்க்கை திட்ட அனுபவத்துடன் வருகிறது. இந்த பயிற்சி பின்-முனை மற்றும் முன்-வலை வலை தொழில்நுட்பங்களுடன் பணிபுரியும் திறன்களில் நீங்கள் தேர்ச்சி பெறுகிறது. வலை அபிவிருத்தி, jQuery, கோணல், நோட்ஜெஸ், எக்ஸ்பிரஸ்ஜேஎஸ் மற்றும் மோங்கோடிபி பற்றிய பயிற்சி இதில் அடங்கும்.

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? 'CSS இல் பின்னணி படம்' வலைப்பதிவின் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களைத் தொடர்புகொள்வோம்.