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

பக்க பின்னணியாக படம் - HTML

முதலில் குறிப்பிடும் முறையைப் பார்ப்போம் பின்னணி படம்ஒரு பண்புக்கூறைப் பயன்படுத்தி தளத்தில் பின்னணிகுறிச்சொல் உடல்:

உடல் குறிச்சொல்லின் பின்னணி பண்புக்கூறைப் பயன்படுத்தி இங்கே பின்னணி படம் அமைக்கப்பட்டுள்ளது.

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

குறிப்பு: HTML ஐப் பயன்படுத்தாமல் பின்னணி படத்தையும் பின்னணி நிறத்தையும் அமைக்க பரிந்துரைக்கப்படுகிறது CSS ஐப் பயன்படுத்துகிறது. இந்த வழக்கில், குறியீடு செல்லுபடியாகும் மற்றும் சரியானதாக இருக்கும்.

பக்க பின்னணியாக படம் - CSS

IN CSS பின்னணிபுதிய வண்ணம் மற்றும் பின்னணி படத்தை ஒரு சொத்தில் அமைக்கலாம் பின்னணி:

இங்கே பின்னணி படம் பின்னணி CSS பண்புகளைப் பயன்படுத்தி அமைக்கப்பட்டுள்ளது.

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

உலாவி சாளரத்தின் முழு அளவிற்கு பின்னணி படத்தை நீட்டிக்க விரும்பினால், சொத்தைப் பயன்படுத்தவும் பின்னணி அளவு: 100%;

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

இந்த டுடோரியலில், எந்தத் தீர்மானத்திலும் உலாவியில் பார்க்கும் பகுதி முழுவதையும் ஆக்கிரமித்து, பதிலளிக்கக்கூடிய பின்னணி படத்தை உருவாக்கும் தொழில்நுட்பத்தை விரிவாகப் படிப்போம். மற்றும் நாம் CSS - பின்னணி அளவு சொத்து பயன்படுத்துவோம். ஜாவாஸ்கிரிப்ட் இல்லாமல்:

உதாரணமாக
ஆதாரங்களைப் பதிவிறக்கவும்

பதிலளிக்கக்கூடிய பின்னணி படங்களைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டுகள்

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

படகோட்டம் கூட்டு

டிஜிட்டல் டெலிபதி

மரியன்னே உணவகம்

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

அடிப்படை கருத்துக்கள்

இதோ எங்கள் விளையாட்டுத் திட்டம்.

முழு வியூபோர்ட்டையும் மறைக்க, பின்னணி அளவிலான சொத்தைப் பயன்படுத்தவும்

CSS பின்னணி-அளவை உள்ளடக்கியதாக அமைக்கலாம். கவர் மதிப்பு, தானாகவும் விகிதாசாரமாகவும் பின்னணி படத்தை நீளம் மற்றும் அகலத்தில் அளவிட உலாவிக்கு அறிவுறுத்துகிறது, இதனால் அது காட்சிப் பகுதியின் அகலம்/உயரத்திற்கு சமமாகவோ அல்லது அதிகமாகவோ இருக்கும்.

மொபைல் சாதனங்களுக்கான பின்னணி படத்தின் சிறிய பதிப்பைப் பெற மீடியா வினவலைப் பயன்படுத்துதல்

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

இருப்பினும், மொபைல் சாதனங்களுக்கான பின்னணியின் சிறிய பதிப்புகளைப் பயன்படுத்துவது ஒரு மோசமான யோசனை அல்ல, ஏன் என்பதை நான் விளக்குகிறேன்.
எடுத்துக்காட்டில் பயன்படுத்தப்படும் படம் 5500 x 3600px அளவில் உள்ளது.

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

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

அதனால். ஆரம்பிக்கலாம்.

HTML

மார்க்அப்பில் இருந்து உங்களுக்கு தேவையான அனைத்தும் கீழே உள்ளன:

...உங்கள் பக்கத்தின் உள்ளடக்கம்...

உடல் உறுப்புக்கு ஒரு பின்னணி படத்தை ஒதுக்குவோம், இதனால் முழு பின்னணி கவரேஜை அடைவோம்.

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

CSS

உடல் உறுப்புகளின் பண்புகளை பின்வருமாறு அறிவிக்கிறோம்:

உடல் ( /* பின்னணி படத்தின் இருப்பிடம் */ பின்னணி படம்: url (படங்கள்/பின்னணி-photo.jpg); /* பின்னணி படம் கிடைமட்டமாகவும் செங்குத்தாகவும் மையப்படுத்தப்பட்டுள்ளது */ பின்னணி-நிலை: மைய மையம்; /* பின்னணி மீண்டும் வராது */ பின்னணி-மீண்டும்: இல்லை-மீண்டும்; கொண்டிருக்கும் கொள்கலனின் அளவு மாறும்போது அளவை மாற்றுவதற்கான பின்னணி: கவர் /* பின்னணி படத்தை ஏற்றும்போது காண்பிக்கப்படும் */ பின்னணி நிறம்: #464646 .

இந்த பட்டியலில் உள்ள மிக முக்கியமான மதிப்பு சொத்து:

பின்னணி அளவு: கவர்;

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

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

உங்களுக்குத் தெரியும், ஒரு படத்தை அதன் உண்மையான அளவைத் தாண்டி நீட்டினால், படத்தின் தரத்தை இழக்கிறோம் ( வேறு வார்த்தைகளில் கூறுவதானால், pixelation தோன்றுகிறது):

ஒரு படத்தை அதன் அசல் அளவை நோக்கி அளவிடும்போது, ​​படத்தின் தரம் குறைகிறது.

பின்னணியைத் தேர்ந்தெடுக்கும்போது இதைப் பற்றி மறந்துவிடாதீர்கள். டெமோ எடுத்துக்காட்டில், 5500 x 3600px அளவுள்ள புகைப்படத்தைப் பயன்படுத்துகிறோம் பெரிய திரைகள், எனவே இந்த விஷயத்தில் இதேபோன்ற ஒன்று நடக்க வாய்ப்பில்லை.

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

பின்னணி-நிலை: மைய மையம்;

இது அளவீட்டு அச்சுகளை காட்சிப் பகுதியின் மையத்தில் அமைக்கும்.

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

பின்னணி இணைப்பு: நிலையானது;

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

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

பின்வரும் சொத்து மதிப்புகள் சுய விளக்கமளிக்கும்.

CSS சுருக்கெழுத்து

மேலே, தெளிவுக்காக, CSS பண்புகளை முழுமையாக வரையறுத்துள்ளேன்.

குறுகிய பதிப்பு இது போல் தெரிகிறது:

உடல் (பின்னணி: url(background-photo.jpg) சென்டர் சென்டர் கவர் இல்லை-ரிபீட் ஃபிக்ஸட்; )

url மதிப்பை உங்கள் படத்திற்கான பாதைக்கு மாற்றினால் போதும்.

விருப்பமானது: பின்னணி படத்தின் சிறிய பதிப்பைப் பெற மீடியா வினவல்

குறைந்த தெளிவுத்திறன் திரைகளுக்கு, படத் தெளிவுத்திறனை விகிதாசாரமாக 768 ஆல் 505px ஆகக் குறைக்க ஃபோட்டோஷாப் தேவைப்படும். கோப்பு அளவைக் குறைக்க Smush.it மூலமாகவும் இயக்கினேன். இது 1741 முதல் 114 கிலோபைட் வரை அளவைக் குறைக்க அனுமதித்தது. இது கோப்பு அளவை 93% குறைத்தது.

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

மற்றும் ஊடகங்களின் கேள்வி இங்கே:

மீடியா வினவலின் முக்கிய பகுதியானது அதிகபட்ச அகலம்: 767px பண்பு ஆகும், இது எங்கள் விஷயத்தில் உலாவி காட்சிப் பகுதி 767px ஐ விட பெரியதாக இருந்தால், ஒரு பெரிய படம் பயன்படுத்தப்படுகிறது.

இந்த முறையின் தீமை என்னவென்றால், நீங்கள் உலாவி சாளரத்தை 1200px இலிருந்து 640px ஆக மாற்றினால் (அல்லது அதற்கு நேர்மாறாக), சிறிய அல்லது பெரிய படம் ஏற்றப்படும் போது நீங்கள் ஒளிரும் திரையைப் பார்ப்பீர்கள்.

மற்றும் கூடுதலாக, காரணமாக சில மொபைல் சாதனங்கள்அதிக தெளிவுத்திறனில் வேலை செய்ய முடியும் - எடுத்துக்காட்டாக, 1136 x 640px தெளிவுத்திறன் கொண்ட ரெடினா டிஸ்ப்ளே கொண்ட ஐபோன் 5, சிறிய படம் அசிங்கமாக இருக்கும்.

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

இணையதளங்களுக்கு புதிய பின்னணியை உருவாக்குதல்

பணியை முடிக்க, நீங்கள் 4 முறைகளில் ஒன்றைப் பயன்படுத்தலாம்:

• 1. ஒரு வண்ணம் கொண்ட பின்னணி
• 2. அமைப்புடன் கூடிய பின்னணி
• 3. ஒரு சாய்வு பயன்படுத்தி பின்னணி
• 4. ஒரு பெரிய படத்திலிருந்து பின்னணி

ஒரு வண்ணத்தைப் பயன்படுத்தி பின்னணியை உருவாக்கவும்

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

பின்னணி நிறம்: #83C5E9 ; (உதாரணத்தைப் போல நீல பின்னணி)

இணையதளத்தில் வண்ணங்களின் முழுமையான பட்டியலை நீங்கள் காணலாம் - (STM). நிறத்தை மாற்ற, பெருங்குடலுக்குப் பிறகு மதிப்பை மாற்றி, உங்கள் முயற்சிகளை அனுபவிக்கவும்.

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

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

பின்னணி நிறம்: #537759;

பின்னணி-படம்: url(images/pattern.png);

இந்த குறியீட்டில் நிறத்தை பராமரிப்பதற்கான ஒரு பழக்கமான அளவுரு உள்ளது (இது பச்சை) மற்றும் பச்சை அமைப்பை இணைக்கும் ஒரு உறுப்பு.

சாய்வு பயன்படுத்தி பின்னணியை உருவாக்குதல்

css செயல்பாடுகளைப் பயன்படுத்தி இணைக்கப்பட்டுள்ள எந்தப் படத்தையும் கிடைமட்டமாகவும் செங்குத்தாகவும் (அச்சுகளுடன்) மீண்டும் மீண்டும் செய்யலாம் எக்ஸ்மற்றும் ஒய்) இந்த வாய்ப்பு எங்கள் சொந்த கைகளால் தளத்திற்கான எந்தவொரு எளிய பின்னணியையும் உருவாக்க அனுமதிக்கிறது. இதைச் செய்ய, நீங்கள் 1 மெகாபிக்சல் அகலத்தில் ஒரு சாய்வை உருவாக்க வேண்டும் (கீழே உள்ள படத்தைப் பார்க்கவும்), அதை ஒரு படமாகச் சேமித்து உங்கள் ஹோஸ்டிங்கில் பதிவேற்றவும். இதற்குப் பிறகு, நீங்கள் தேவையான குறியீட்டை எழுதலாம், அதாவது:

பின்னணி நிறம்: #83C5E9;

பின்னணி-படம்: url(images/gradient.jpg);

பின்னணி-மீண்டும்: மீண்டும்-x;

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

இணையதள பின்னணிக்கு பெரிய படத்தைப் பயன்படுத்துதல்

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

பின்னணி நிறம்: #000000;

பின்னணி-படம்: url (படங்கள்/பட தலைப்பு.jpg);

பின்னணி-நிலை: மையத்தின் மேல்;

பின்னணி-மீண்டும்: இல்லை-மீண்டும்;

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

ucoz இணையதளங்களில் பின்னணியை மாற்றுதல்

ஒரு தளத்திற்கான பின்னணியை உருவாக்கும் அந்த முறைகள் வெவ்வேறு உள்ளடக்க மேலாண்மை அமைப்புகளில் பயன்படுத்தப்படலாம், ஆனால் தளங்களில் அல்ல - ucoz. ucoz வலைத்தளத்திற்கான பின்னணியை மாற்ற, நீங்கள் தளக் கட்டுப்பாட்டுப் பலகத்திற்குச் செல்ல வேண்டும் "வடிவமைப்பு மேலாண்மை", பின்னர் உள்ளே "வார்ப்புருக்களை திருத்துதல்".

இப்போது நீங்கள் ஸ்டைல் ​​ஷீட்டை (CSS) திறக்க வேண்டும், வரியைக் கண்டறியவும் "உடல்"மற்றும் அளவுரு "பின்னணி". இதற்குப் பிறகு, நீங்கள் இணைப்பை நகலெடுக்க வேண்டும், அதை உங்கள் இணைய உலாவியில் ஒட்டவும், பின்னணியில் இருந்த படத்தை நீங்கள் அணுகலாம்.

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

தளத்தின் பின்னணியை HTML ஆக மாற்றுகிறது

ஒரு படத்தைப் பயன்படுத்தி html தளத்தில் பின்னணியை உருவாக்க விரும்பினால், குறியீட்டில் வரியை உள்ளிடவும்:

வண்ணத்தைப் பயன்படுத்தி தளத்தின் பின்னணியை உருவாக்க விரும்பினால், வரி இப்படி இருக்க வேண்டும்:

இது எங்கள் கதையை முடிக்கிறது. ஒரு வலைத்தளத்திற்கான பின்னணியை எவ்வாறு உருவாக்குவது என்பது இப்போது உங்களுக்குத் தெரியும். மகிழ்ச்சியான திட்டங்கள்!

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

தளத்திற்கான பின்னணி

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

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

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

html இல் பின்னணியுடன் பணிபுரிவதற்கான அடிப்படைகள்

பல கூறுகளை பின்னணியாகப் பயன்படுத்தலாம்:

• நிறம்;
• பின்னணி படம்;
• அமைப்பு படம்.

அவை ஒவ்வொன்றின் பயன்பாட்டை இன்னும் விரிவாகப் பார்ப்போம்.

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

இணையதள பின்னணி #55D52B

ஹெக்ஸாடெசிமல் வண்ணக் குறியீட்டுடன் கூடுதலாக, முக்கிய வார்த்தை அல்லது RGB வடிவத்தில் ஒரு மதிப்பு ஆதரிக்கப்படுகிறது. எடுத்துக்காட்டுகள்:

இணையதள பின்னணி rgb(23,113,44)

இணையதளத்தின் பின்னணி பச்சை

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

வண்ணங்களை அமைக்க HTML 16 முக்கிய வார்த்தைகளை மட்டுமே ஆதரிக்கிறது. அவற்றில் சில இங்கே: வெள்ளை, சிவப்பு, நீலம், கருப்பு, மஞ்சள்மற்றும் பலர்.

எனவே, ஒரு html வலைத்தளத்திற்கான பின்னணியை அமைக்க, ஹெக்ஸாடெசிமல் அல்லது RGB வடிவமைப்பைப் பயன்படுத்துவது நல்லது.

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

இப்போது ஒரு தளத்திற்கான பின்னணி படத்தை அமைப்பதற்கான ஹைபர்டெக்ஸ்ட் மொழியின் திறன்களைப் பார்ப்போம். பின்னணி-படப் பண்புகளைப் பயன்படுத்தி இதைச் செய்யலாம்.

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

நாம் கவிதை பற்றி ஒரு வலைத்தளத்தை உருவாக்குகிறோம் என்று வைத்துக்கொள்வோம், மேலும் பெகாசஸின் படத்தை பின்னணியாகப் பயன்படுத்த வேண்டும். சிறகுகள் கொண்ட குதிரை கவிஞரின் படைப்பு சிந்தனையின் சுதந்திரத்தை வெளிப்படுத்தும்!

படத்தை ஒருமுறை திரையின் நடுவில் காட்ட வேண்டும். ஆனால், துரதிர்ஷ்டவசமாக, உலாவி நமது உயர்ந்த ஆசைகளை புரிந்து கொள்ளவில்லை. மேலும் இது திரைப் பகுதிக்கு இடமளிக்கும் பல முறை தளத்தின் பின்னணியில் ஒரு சிறிய படத்தைக் காட்டுகிறது:

சிறகுகளுடன் கூடிய நான்கு சிரிக்கும் குதிரைகள் கவிஞர்களுக்கு மிகவும் உத்வேகமாக இருக்கும். எனவே, எங்கள் பெகாசஸின் குளோனிங்கை நாங்கள் தடை செய்கிறோம். பின்னணி-மீண்டும் பண்புகளைப் பயன்படுத்தி இதைச் செய்கிறோம். சாத்தியமான மதிப்புகள்:

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

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

ஆனால், நிச்சயமாக, எங்கள் ஃப்ளையர் திரையின் நடுவில் அமைந்திருந்தால் நன்றாக இருக்கும். பின்னணி-நிலைப் பண்பு என்பது, பின்னணிப் படத்தைப் பக்கத்தில் நிலைநிறுத்துவதற்காகத் துல்லியமாக வடிவமைக்கப்பட்டுள்ளது. நீங்கள் பல வழிகளில் இருப்பிட ஒருங்கிணைப்புகளை அமைக்கலாம்:

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

எளிமையான மையப்படுத்தல் விருப்பத்தைப் பயன்படுத்துவோம்:

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

• சுருள்;


• சரி செய்யப்பட்டது.

எங்களுக்கு கடைசி மதிப்பு தேவை. இப்போது எங்கள் எடுத்துக்காட்டு குறியீடு இப்படி இருக்கும்:

இணையதள அமைப்பு பின்னணி

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

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

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

ட்ரெபச்சேவ் டி.பி. 2012-2020

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

தளவமைப்பு ஜாவாஸ்கிரிப்ட் Php nodejs vue rue rue rue rue rue weactaral ajax ajax alatorial html குறிப்பு CSS குறிப்பு OOP மற்றும் MVC டுடோரியல் வீடியோ டுடோரியல்கள் அடிப்படை பயிற்சி குறிப்பு வீடியோ டுடோரியல்கள் அடிப்படை டுடோரியல் அடிப்படை பயிற்சி அடிப்படை டுடோரியல் டெவலப்பரின் டுடோரியல் டெவலப்பரின் டுடோரியல் அஜாக்ஸ்+ஃபட் டட்டோரியல்

பின்னணி-இணைப்பு சொத்து

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

தொடரியல்

தேர்வி (பின்னணி-இணைப்பு: நிலையான | உருள் | உள்ளூர்; )

மதிப்புகள்

இயல்புநிலை மதிப்பு: சுருள்.

உதாரணமாக. உருள் பொருள்

இப்போது சொத்து பின்னணி-இணைப்புதயாராதல் சுருள். உறுப்பை செங்குத்தாக உருட்டவும் - பின்னணியுடன் உரை உருட்டலைக் காண்பீர்கள்:

உடல் (பின்னணி-இணைப்பு: உருள்; பின்னணி-படம்: url("bg.png"); ) #elem (அகலம்: 400px; விளிம்பு: 0 தானியங்கு; உரை-சீரமைப்பு: நியாயப்படுத்து; எழுத்துரு-எடை: தடிமன்; எழுத்துரு அளவு: 20px)

உதாரணமாக. உருள் பொருள்

இப்போது சொத்து பின்னணி-இணைப்புதயாராதல் சரி செய்யப்பட்டது. உறுப்பை செங்குத்தாக உருட்டவும், பின்புலத்தில் உரை நெகிழ்வதைக் காண்பீர்கள்:

உடல் (பின்னணி-இணைப்பு: நிலையானது; பின்னணி-படம்: url("bg.png"); ) #elem (அகலம்: 400px; விளிம்பு: 0 தானியங்கு; உரை-சீரமைப்பு: நியாயப்படுத்து; எழுத்துரு-எடை: தடிமன்; எழுத்துரு அளவு: 20px)