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

#bg (நிலை: நிலையானது; மேல்:-50%; இடது:-50%; அகலம்: 200%; உயரம்: 200%; ) #bg img (நிலை: முழுமையானது; மேல்: 0; இடது: 0; வலது: 0; கீழே: 0; தானாக, குறைந்தபட்ச அகலம்: 50%;

பணிபுரிகிறது:

சஃபாரி / குரோம் / பயர்பாக்ஸ் (எல்லா பதிப்புகளிலும் சோதிக்கப்படவில்லை, ஆனால் சமீபத்தியவற்றில் நன்றாக வேலை செய்கிறது).

IE 8+.

ஓபரா (எந்த பதிப்பு) மற்றும் IE இந்த முறையுடன் வேலை செய்ய மறுக்கின்றன (படம் பொருத்துதல் தவறானது).

jQuery ஐப் பயன்படுத்துதல்

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

#bg (நிலை: நிலையானது; மேல்: 0; இடது: 0; ) .bgwidth (அகலம்: 100%; ) .bgheight (உயரம்: 100%; )

$(செயல்பாடு() (var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); செயல்பாடு resizeBg() (((TheWindow) என்றால் .width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

பணிபுரிகிறது:

IE7+ (ஸ்டப்களுடன், ஒருவேளை IE6 இல் வேலை செய்யும்)

மற்ற எல்லா உலாவிகளிலும்.

முடிவுரை

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

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

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

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

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

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

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

இணையதளத்தில் ஒரு சிறிய பதிப்பில் இது போல் தெரிகிறது

முதலில், நிரலில் ஒரு புதிய ஆவணத்தை உருவாக்கவும்

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

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

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

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

தலைப்பு குறிச்சொல்லில் நீங்கள் ஆவணத்தின் தலைப்பை மாற்றலாம், எடுத்துக்காட்டாக, அதை "எனது முதல் வலைப்பக்கமாக" மாற்றலாம். உங்கள் பக்கம் குறியாக்கத்தில் சேமிக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும் UTF-8

இல்லையெனில், வேறு குறியாக்கம் இருந்தால், எடுத்துக்காட்டாக windows-1251, உலாவியில் உள்ள ஆவணத்தின் உரை ஹைரோகிளிஃப்களில் காட்டப்படும். நிரல் கருவிப்பட்டியில் உள்ள "குறியீடுகள் - Utf-8 (BOM இல்லாமல்)" பிரிவில் குறியாக்கத்தை மாற்றலாம்.

நாம் செய்யும் ஒவ்வொரு செயலையும் சேமிக்க மறக்காதீர்கள்.

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

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

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

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

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

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

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

REPEAT //(கிடைமட்டமாகவும் செங்குத்தாகவும் நீட்டவும்) REPEAT-X // (கிடைமட்டமாக மட்டும் நீட்டவும்) REPEAT-Y //(செங்குத்துகளை மட்டும் நீட்டவும்) இல்லை-மீண்டும் //(பின்னணி படத்தை மீண்டும் செய்ய வேண்டாம்)

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

தளத்திற்கான அழகான பின்னணியை நீங்கள் பதிவிறக்கம் செய்யக்கூடிய தளங்களைத் தேர்ந்தெடுத்துள்ளேன்

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

பின்புலத்தை அமைக்க HTML ஐப் பயன்படுத்த முடியுமா?

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

அதன்படி, அடுக்கு நடை தாள்களை (CSS) பயன்படுத்துவோம். பின்னணியை அமைப்பதற்கான வாய்ப்புகள் அதிகம். இன்று நாம் மிக அடிப்படையானவற்றைப் பார்ப்போம்.

css ஐப் பயன்படுத்தி பின்னணி அமைப்பது எப்படி?

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

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

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

உடல் (பின்னணி நிறம்: #D4E6B3;)

இந்தக் குறியீடு தலைப் பிரிவில் செருகப்பட வேண்டும். கோப்புகள் ஒரே கோப்புறையில் இருப்பது முக்கியம்.

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

படத்திற்கு நான் ஒரு சிறிய html மொழி ஐகானைப் பயன்படுத்துவேன்:

அடையாளங்காட்டியுடன் வெற்று தொகுதியை உருவாக்குவோம்:

< div id = "bg" > < / div >

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

#bg(அகலம்: 400px; உயரம்: 250px; பின்னணி-படம்: url(html.png); )

#bg( அகலம்: 400px; உயரம்: 250px; பின்னணி - படம்: url (html. png);

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

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

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

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

மீண்டும் - இயல்புநிலை மதிப்பு, படம் இருபுறமும் மீண்டும் மீண்டும் செய்யப்படுகிறது;

Repeat-x - அச்சில் x இல் மட்டும் மீண்டும் நிகழ்கிறது;

Repeat-y - y அச்சில் மட்டுமே மீண்டும் நிகழ்கிறது;

இல்லை-மீண்டும் - மீண்டும் செய்யாது;

நீங்கள் ஒவ்வொரு மதிப்பையும் எழுதி என்ன நடக்கிறது என்று பார்க்கலாம். நான் இப்படி எழுதுவேன்:

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

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

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

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

மீண்டும் மீண்டும் செய்வதன் மூலம், தளவமைப்பு வடிவமைப்பாளர்கள் ஒரு சிறிய படத்தைப் பயன்படுத்தி பின்னணி அமைப்புகளையும் சாய்வுகளையும் உருவாக்க முடியும். இது 30 x 10 பிக்சல்கள் அல்லது சிறியதாக இருக்கலாம். அல்லது இன்னும் கொஞ்சம் இருக்கலாம். படம் ஒன்று அல்லது இருபுறமும் திரும்பத் திரும்பத் திரும்பும்போது, ​​எந்த மாற்றங்களும் தெரியவில்லை, அதனால் ஒரே ஒரு தடையற்ற பின்னணியாக இருந்தது. மூலம், உங்கள் இணையதளத்தில் தடையற்ற அமைப்பைப் பின்னணியாகப் பயன்படுத்த விரும்பினால், இந்த அணுகுமுறையை இப்போது பயன்படுத்துவது மதிப்பு. இன்று சாய்வு ஏற்கனவே css3 முறைகளைப் பயன்படுத்தி செயல்படுத்தப்படலாம், நிச்சயமாக இதைப் பற்றி பின்னர் பேசுவோம்.

பின்னணி நிலை

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

நீங்கள் அதை வெவ்வேறு வழிகளில் அமைக்கலாம். படம் அமைந்திருக்க வேண்டிய பக்கங்களைக் குறிப்பிடுவது ஒரு விருப்பம்:

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

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

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

பின்னணி-நிலை: 50% 50%;

பின்னணி-நிலை: 50% 50%;

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

இறுதியாக, நீங்கள் பிக்சல்களில் நிலையை குறிப்பிடலாம். எல்லாம் ஒன்றுதான்,%க்கு பதிலாக px மட்டுமே இருக்கும். சில சந்தர்ப்பங்களில், அத்தகைய நிலைப்பாடு தேவைப்படலாம்.

சுருக்கெழுத்து குறியீடு

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

பின்னணி: #333 url(bg.jpg) இல்லை-மீண்டும் 50% 50%;

பின்னணி: #333 url(bg.jpg) இல்லை-மீண்டும் 50% 50%;

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

பின்னணி படத்தின் அளவைக் கட்டுப்படுத்துகிறது

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

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

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

பின்னணி அளவு: 80% 50%;

பின்னணி அளவு: 80% 50%;

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

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

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

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

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

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

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

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

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

css ஐப் பயன்படுத்தி ஒளிஊடுருவக்கூடிய பின்னணி

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

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

நான் முன்பு கூறியது போல், CSS இல் வண்ணங்களை அமைக்க பல வடிவங்கள் உள்ளன. அவற்றில் ஒன்று rgb ஆகும், இது கிராஃபிக் எடிட்டர்களில் பணிபுரிபவர்களுக்கு மிகவும் பிரபலமான வடிவமாகும். இது இவ்வாறு எழுதப்பட்டுள்ளது: rgb(17, 255, 34);

அடைப்புக்குறிக்குள் முதல் மதிப்பு சிவப்பு, பின்னர் பச்சை, பின்னர் நீலம் ஆகியவற்றின் செறிவு ஆகும். மதிப்பு 0 முதல் 255 வரை எண்களாக இருக்கலாம். அதன்படி, rgba வடிவம் வேறுபட்டதல்ல, மேலும் ஒரு அளவுரு மட்டுமே சேர்க்கப்பட்டுள்ளது - ஆல்பா சேனல். மதிப்பு 0 முதல் 1 வரை இருக்கலாம், அங்கு 0 என்பது முழுமையான வெளிப்படைத்தன்மை.

html இல், தளத்தின் பின்னணி குறிப்பிடப்படவில்லை, இது CSS பாணிகளைப் பயன்படுத்தி எழுதப்பட்டது, ஆனால் இது ஒரு கோட்பாட்டு முறை மட்டுமே. இந்த பின்னணியை எவ்வாறு தீர்மானிப்பது என்பதை இப்போது கண்டுபிடிப்போம்.

இணையதளம் அல்லது தனித் தொகுதிக்கான பின்னணி

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

உடல்(
பின்னணி நிறம்: வெள்ளை;
}

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

உடல்(
பின்னணி-படம்: url (படத்திற்கான பாதை. பட நீட்டிப்பு)
}

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

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

அதற்கான ஸ்டைல்கள் இங்கே:

#ct(
பின்னணி-படம்: url(comp.png);
அகலம்: 600px;
உயரம்: 400px;
}

எங்களுக்கு கிடைத்தது இங்கே:

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

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

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

• Repeat-x - கிடைமட்டமாக மட்டும் மீண்டும் செய்யவும்
• Repeat-y - செங்குத்து மட்டும்

நமது கிராஃபிக் பின்னணியின் பண்புகளைச் சேர்ப்போம்:

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

பதவி

பின்னணி-நிலை பண்பு படம் வைக்கப்படும் இடத்தை தீர்மானிக்கிறது. இரண்டு மதிப்புகள் இங்கே குறிப்பிடப்பட்டுள்ளன - கிடைமட்டமாகவும் செங்குத்தாகவும். எடுத்துக்காட்டுகள்: பின்னணி-நிலை: வலது கீழ் - கீழ் வலது மூலையில் உள்ள நிலை, மேல்-இடது - கீழ் மேல் மூலையில் (இயல்புநிலையாக), 250px 500px - மேல் இடது மூலையில் இருந்து வலதுபுறமாக 250 பிக்சல்கள் மற்றும் கீழே ஆஃப்செட் 500

எடுத்துக்காட்டுகளை நன்றாகப் பார்ப்போம்:

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

படம் மேல் வலது விளிம்பிற்கு நகரும். அதன் விளிம்புகள் தெரியும்படி மஞ்சள் நிற பின்னணியையும் கொடுத்தேன்.

பின்னணி-நிலை: 50% 50%;

படம் அதன் தொகுதியில் சரியாக மையமாகத் தோன்றியது. ஆம், ஆம், நிலையின் சதவீத பதிவுக்கு இதுவும் சாத்தியமாகும்.

பின்னணி-நிலை: 70% 20%;

பின்னணி 70% கிடைமட்டமாகவும் 20% செங்குத்தாகவும் மாற்றப்பட்டது.

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

பின்னணியை பூட்டு

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

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

இந்த நன்மையின் சுருக்கமான பதிப்பு

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

பின்னணி: மஞ்சள் url(comp.png) இல்லை-மீண்டும் 20% 100px;

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

நிறைய பின்னணிகள்

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

நான் அதை மடிக்கணினி என்று அழைத்தேன்.

மல்டிஃபோனைச் செருகுவதற்கான குறியீடு இங்கே:

பின்னணி: url(comp.png) இல்லை-மீண்டும் 20% 100px,
url(laptop.png) இல்லை-மீண்டும் 50% 50%;
பின்னணி நிறம்: மஞ்சள்;

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

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

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