HTML இல் பின்னணி நிறத்தை சரிசெய்யவும்

நூலாசிரியர்: Judy Howell
உருவாக்கிய தேதி: 5 ஜூலை 2021
புதுப்பிப்பு தேதி: 1 ஜூலை 2024
Anonim
how to create thumbnail for youtube video | youtube thumbnail kaise banaye || canva tutorial part#3
காணொளி: how to create thumbnail for youtube video | youtube thumbnail kaise banaye || canva tutorial part#3

உள்ளடக்கம்

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

அடியெடுத்து வைக்க

4 இன் முறை 1: திட பின்னணி வண்ணத்தை அமைத்தல்

  1. உங்களுக்கு பிடித்த உரை திருத்தியில் உங்கள் HTML கோப்பைத் திறக்கவும். HTML5 ஐப் பொறுத்தவரை, HTML பண்புக்கூறு bgcolor> இனி ஆதரிக்கப்படாது. உங்கள் பக்கத்தின் மற்ற எல்லா பாணி அம்சங்களையும் போலவே பின்னணி நிறமும் CSS உடன் அமைக்கப்பட வேண்டும்.
  2. சேர்க்கவும் நடை> / நடை> உங்கள் ஆவணத்தைக் குறிக்கிறது. உங்கள் பக்கத்திற்கான அனைத்து பாணி தரவுகளும் (பின்னணி வண்ணம் உட்பட) இந்த குறிச்சொற்களுக்குள் குறியாக்கம் செய்யப்பட வேண்டும். உங்களிடம் இருக்கிறதா? நடை> குறிச்சொற்கள் ஏற்கனவே சுட்டிக்காட்டப்பட்டுள்ளன, பின்னர் நீங்கள் கோப்பின் அந்த பகுதிக்கு உருட்டலாம்.

    ! DOCTYPE html> html> head> style> / style> / head> / html>

  3. உள்ளே "உடல்" உறுப்பை தட்டச்சு செய்க நடை> / நடை> குறிச்சொற்கள். CSS இல் உள்ள "உடல்" உறுப்புக்கு நீங்கள் மாற்றும் எதுவும் முழு பக்கத்தையும் பாதிக்கும்.

    ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

  4. "உடல்" உறுப்புக்கு "பின்னணி-வண்ண" சொத்தைச் சேர்க்கவும். இந்த சூழலில் "வண்ணத்தின்" ஒரு எழுத்துப்பிழை மட்டுமே செயல்படும் (இல்லை: நிறம்).

    ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

  5. விரும்பிய பின்னணி நிறத்தை "பின்னணி-வண்ணம்" பின்னால் வைக்கவும். நீங்கள் இப்போது ஒரு வண்ணத்தின் பெயரைக் குறிக்கலாம் (பச்சை, நீலம், எட், முதலியன), ஹெக்ஸாடெசிமல் (ஹெக்ஸ்) குறியீடுகளைப் பயன்படுத்தவும் (எ.கா. #000000 கருப்புக்கு, # ff0000 சிவப்பு, முதலியன) அல்லது வண்ணத்திற்கான RGB மதிப்பைத் தட்டச்சு செய்வதன் மூலம் (போன்றவை) rgb (255,255,0) மஞ்சள் நிறத்திற்கு). ஹெக்ஸாடெக்ஸிமல் குறியீடுகளுடன் ஒரு எடுத்துக்காட்டு கீழே உள்ளது, இதன் பின்னணியை விக்கிஹோ பேனரைப் போலவே செய்கிறது:

    ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

    • வெள்ளை: #FFFFFF
    • வெளிர் இளஞ்சிவப்பு: # FFCCE6
    • எரிந்த சியன்னா: #993300
    • இண்டிகோ - # 4B0082
    • வயலட் - # EE82EE
    • நீங்கள் விரும்பும் எந்த நிறத்தின் ஹெக்ஸ் குறியீடுகளையும் கண்டுபிடிக்க w3schools.com HTML கலர் பிக்கரைப் பாருங்கள்.
  6. பிற உறுப்புகளுக்கு பின்னணி வண்ணங்களைப் பயன்படுத்த "பின்னணி-வண்ணம்" பயன்படுத்தவும். நீங்கள் உடல் உறுப்பை அமைப்பது போலவே, பிற உறுப்புகளின் பின்னணியை அமைக்க பின்னணி-வண்ணத்தைப் பயன்படுத்தலாம். அந்த உறுப்புகளை உள்ளே வைக்கவும் நடை> / நடை> பின்னணி-வண்ண சொத்துடன்.

    ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {பின்னணி-நிறம்: ஆரஞ்சு; } p {பின்னணி-வண்ணம்: rgb (255,0,0); style / style> / head> body> h1> இந்த தலைப்பு ஒரு ஆரஞ்சு பின்னணியைப் பெறுகிறது </ h1> p> இந்த பத்தி சிவப்பு பின்னணியைப் பெறுகிறது / p> / body> / html>

4 இன் முறை 2: ஒரு படத்தை பின்னணியாகப் பயன்படுத்துதல்

  1. உரை திருத்தியில் HTML கோப்பைத் திறக்கவும். பலர் தங்கள் வலைத்தளத்தின் பின்னணியாக ஒரு படத்தைப் பயன்படுத்த விரும்புகிறார்கள். இதன் மூலம் நீங்கள் ஒரு முறை, அமைப்பு, புகைப்படம் அல்லது வேறு எந்த படத்தையும் பின்னணியாக அமைக்கலாம். HTML5 இலிருந்து, அனைத்து பின்னணிகளும் CSS (அடுக்கு நடைத்தாள்கள்) உடன் அமைக்கப்பட வேண்டும் நடை> / நடை> குறிச்சொற்கள்.
  2. சேர்க்கவும் நடை> / நடை> உங்கள் HTML கோப்பில் குறிச்சொற்கள். உங்கள் பக்கத்திற்கான அனைத்து பாணி தரவும் (பின்னணி நிறம் உட்பட) இந்த குறிச்சொற்களுக்குள் குறிக்கப்பட வேண்டும். நீங்கள் ஏற்கனவே வைத்திருக்கிறீர்களா? நடை> குறிச்சொற்கள் அமைக்கப்பட்டன, கோப்பின் அந்த பகுதிக்கு உருட்டவும்.

    ! DOCTYPE html> html> head> style> / style> / head> / html>

  3. உள்ளே "உடல்" உறுப்பை தட்டச்சு செய்க நடை> / நடை> குறிச்சொற்கள். CSS இல் உள்ள "உடல்" உறுப்புக்கு நீங்கள் மாற்றும் எதுவும் முழு பக்கத்தையும் பாதிக்கும்.

    ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

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

    ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); பின்னணி-வண்ணம்: # 93B874; } / style> / head> body> / body> / html>

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

    ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); பின்னணி-வண்ணம்: # 93B874; } / style> / head> body> / body> / html>

    • முதல் படம் மேலே உள்ளது. இரண்டாவது படம் முதல் கீழே உள்ளது.

4 இன் முறை 3: சாய்வு பின்னணியை உருவாக்கவும்

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

    பின்னணி: நேரியல்-சாய்வு (திசை / கோணம், வண்ண 1, வண்ண 2, வண்ண 3, முதலியன);

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

    ! DOCTYPE html> html> head> style> html {min-height: 100%; / * சாய்வு முழு பக்கத்தையும் பரப்புவதை உறுதி செய்ய இது தேவைப்படுகிறது * /} உடல் {பின்னணி: -வெப்கிட்-நேரியல்-சாய்வு (# 93B874, # C9DCB9); / * குரோம் 10+, சஃபாரி 5.1+ * / பின்னணி: -ஓ-நேரியல்-சாய்வு (# 93B874, # C9DCB9); / * ஓபரா 11.1+ * / பின்னணி: -moz- நேரியல்-சாய்வு (# 93B874, # C9DCB9); / * பயர்பாக்ஸ் 3.6+ * / பின்னணி: நேரியல்-சாய்வு (# 93B874, # C9DCB9); / * இயல்புநிலை தொடரியல் (கடைசியாக இருக்க வேண்டும்) * / பின்னணி-வண்ணம்: # 93B874; / * சாய்வு ஏற்றப்படாவிட்டால் பின்னணி வண்ணத்தை அமைப்பது நல்லது, * /} / style> / head> body> / body> / html>

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

    ! DOCTYPE html> html> head> style> html {min-height: 100%; } உடல் {பின்னணி: -வெப்கிட்-நேரியல்-சாய்வு (இடது, # 93B874, # C9DCB9); / * இடமிருந்து வலமாக * / பின்னணி: -ஓ-நேரியல்-சாய்வு (வலது, # 93B874, # C9DCB9); / * வலதுபுறத்தில் முடிவு * / பின்னணி: -moz- நேரியல்-சாய்வு (வலது, # 93B874, # C9DCB9); / * வலதுபுறத்தில் முடிவு * / பின்னணி: நேரியல்-சாய்வு (வலமிருந்து, # 93B874, # C9DCB9); / * வலது பக்கமாக நகர்கிறது * / பின்னணி-வண்ணம்: # 93B874; / * சாய்வு ஏற்றப்படாவிட்டால் பின்னணி வண்ணத்தை அமைப்பது நல்லது, * /} / style> / head> body> / body> / html>

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

      பின்னணி: நேரியல்-சாய்வு (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

    • வண்ணங்களுக்கு வெளிப்படைத்தன்மையைச் சேர்க்கவும். இதன் மூலம் நீங்கள் வண்ணங்களை மங்கச் செய்யலாம். நிறத்திலிருந்து ஒன்றும் மங்குவதற்கு ஒரே நிறத்தைப் பயன்படுத்துங்கள். நீங்கள் செயல்பாட்டை நேசிப்பீர்கள் rgba () நிறத்தைக் குறிக்கப் பயன்படுத்த வேண்டும். இறுதி மதிப்பு வெளிப்படைத்தன்மையின் அளவை தீர்மானிக்கிறது: 0 ஒளிபுகா மற்றும் 1 வெளிப்படையான.

      பின்னணி: நேரியல் சாய்வு (வலமிருந்து, rgba (147,184,116.0), rgba (147,184,116.1%);

4 இன் முறை 4: வண்ண அனிமேஷனை வால்பேப்பராக அமைக்கவும்

  1. செல்லவும் நடை> உங்கள் HTML குறியீட்டில். நீங்கள் ஒரு திட பின்னணி நிறத்தைக் கண்டால், இல்லை என்றால், வண்ண பின்னணியை மாற்றுவதில் பரிசோதனை செய்யுங்கள். HTML 5 இலிருந்து, பின்னணி வண்ணங்களை CSS (அடுக்கு நடைத்தாள்கள்) உடன் வரையறுக்க வேண்டும். CSS உடன் நீங்கள் ஒருபோதும் பின்னணி வண்ணத்தை அமைக்கவில்லை என்றால், இந்த முறையை முயற்சிக்கும் முன் திட பின்னணி நிறத்தை அமைப்பதற்கான பகுதியைப் படியுங்கள்.
  2. சொத்தைச் சேர்க்கவும் இயங்குபடம் "உடல்" உறுப்புக்கு. ஒவ்வொரு உலாவிக்கும் வெவ்வேறு குறியீடு தேவைப்படுவதால் நீங்கள் 2 வெவ்வேறு பண்புகளைச் சேர்க்க வேண்டும்.

    ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s எல்லையற்றது; அனிமேஷன்: வண்ண மாற்றம் 60 களின் எல்லையற்றது; } / style> / head> body> / body> / html>

    • -வெப்கிட்-அனிமேஷன் Chrome- அடிப்படையிலான உலாவிகளுக்கு (Chrome, Opera, Safari) சொத்து தேவைப்படுகிறது. இயங்குபடம் மற்ற எல்லா உலாவிகளுக்கும் நிலையானது.
    • வண்ண மாற்றம் இந்த எடுத்துக்காட்டில் அனிமேஷன் என்று அழைக்கப்படுகிறது.
    • 60 கள் அனிமேஷன் / மாற்றத்தின் காலம் (60 வினாடிகள்) ஆகும். வெப்கிட் மற்றும் இயல்புநிலை தொடரியல் இரண்டிற்கும் இதை அமைப்பதை உறுதிசெய்க.
    • எல்லையற்ற அனிமேஷன் காலவரையின்றி மீண்டும் செய்யப்பட வேண்டும் என்பதைக் குறிக்கிறது. நீங்கள் வண்ணங்களை லூப் செய்து கடைசி நிறத்தில் நிறுத்த விரும்பினால், இந்த பகுதியை நீங்கள் தவிர்க்கலாம்.
  3. உங்கள் அனிமேஷனில் வண்ணங்களைச் சேர்க்கவும். இப்போது நீங்கள் பின்னணி வண்ணங்களை அமைக்க @keyframes விதியைப் பயன்படுத்தப் போகிறீர்கள், அதே போல் ஒவ்வொரு வண்ணத்தையும் எவ்வளவு நேரம் பக்கத்தில் காணலாம். மீண்டும், நீங்கள் பல்வேறு உலாவிகளுக்கு பல குறியாக்கங்களைச் சேர்க்க வேண்டும்.

    ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s எல்லையற்றது; அனிமேஷன்: வண்ண மாற்றம் 60 களின் எல்லையற்றது; we we -வெப்கிட்-கீஃப்ரேம்கள் வண்ண மாற்றம் {0% {பின்னணி: # 33FFF3;} 25% {பின்னணி: # 78281F;} 50% {பின்னணி: # 117A65;} 75% {பின்னணி: # DC7633;} 100% {பின்னணி: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

    • இரண்டு வரிகள் (we -வெப்கிட்-கீஃப்ரேம்கள் மற்றும் @keyframes பின்னணி வண்ணங்கள் மற்றும் சதவீதங்களுக்கு ஒரே மதிப்புகள் உள்ளன. இது எல்லா உலாவிகளுக்கும் ஒரே மாதிரியாக இருக்க வேண்டும்.
    • சதவீதங்கள் (0%, 25%, முதலியன) அனிமேஷனின் மொத்த கால அளவைக் குறிக்கும் (60 கள்). பக்கம் ஏற்றும்போது, ​​பின்னணியில் வண்ணம் அமைக்கப்படும் 0% மற்றும் (# 33FFF3). அனிமேஷனின் 25% அல்லது 60 விநாடிகள் இயங்கும்போது, ​​பின்னணி மாறுகிறது # 78281 எஃப், மற்றும் பல.
    • நீங்கள் கால அளவு மற்றும் வண்ணங்களை விரும்பியபடி சரிசெய்யலாம்.

தளத்தில் பிரபலமாக

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