CSS உடன் பின்னணி நிறத்தை மாற்றுவது எப்படி

CSS உடன் பின்னணி நிறத்தை மாற்றுவது எப்படி

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





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





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





அமைக்கவும்

ஒரு சிறிய ஆரம்ப வேலைகளைத் தட்டுவோம்.

ஐபாடில் இருந்து ஐடியூன்ஸ் பாடல்களை இறக்குமதி செய்வது எப்படி

குறிப்பு : நான் பயன்படுத்த பரிந்துரைக்கிறேன் விஷுவல் ஸ்டுடியோ குறியீடு உடன் நேரடி சேவையக நீட்டிப்பு நீங்கள் HTML மற்றும் CSS ஐ புதுப்பிக்கும்போது நிகழ்நேர மாற்றங்களைக் காண.



  1. உங்கள் திட்டத்தின் கோப்புகளுக்கு ஒரு கோப்புறையை உருவாக்கவும்.
  2. ஒன்றை உருவாக்கவும் index.html உங்கள் HTML ஐ வைக்க கோப்பு. நீங்கள் கொதிகலன் குறியீட்டைப் பயன்படுத்தலாம் அல்லது சிலவற்றை அமைக்கலாம் , , மற்றும் குறிச்சொற்கள்.
  3. ஒன்றை உருவாக்கவும் styles.css உங்கள் CSS க்கான கோப்பு.
  4. வைப்பதன் மூலம் உங்கள் CSS கோப்பை HTML உடன் இணைக்கவும் உள்ளே குறிச்சொற்கள்.

இப்போது நீங்கள் CSS ஐ திருத்தத் தொடங்கத் தயாராக உள்ளீர்கள்.

தொடர்புடையது: ஒரு கொதிகலன் வலைத்தளத்தை உருவாக்குவது எப்படி





CSS உடன் பின்னணி நிறத்தை மாற்றுவது எப்படி

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

body {
background-color: rgb(191, 214, 255);
}

இந்த குறியீடு பின்னணியை நல்ல வெளிர் நீலமாக மாற்றுகிறது.





தி பின்னணி நிறம் சொத்து ஆறு வெவ்வேறு வடிவங்களில் வண்ணங்களை ஏற்றுக்கொள்கிறது:

  • பெயர் : விளக்கு நீலம்; (நெருங்கிய தோராயத்திற்கு)
  • ஹெக்ஸ் குறியீடு : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); எங்கே க்கு ஆல்பா (ஒளிபுகா)
  • எச்எஸ்எல் : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); எங்கே க்கு ஆல்பா (ஒளிபுகா)

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

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

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

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

பின்னணி சொத்து சாய்வுகளையும் ஏற்றுக்கொள்கிறது:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

CSS இல் பின்னணி படத்தை மாற்றுவது எப்படி

பின்னணி ஒரு திடமான நிறம் அல்லது சாய்வாக இல்லாமல் ஒரு படமாக இருக்க விரும்பினால் என்ன செய்வது? சுருக்கெழுத்து பின்னணி சொத்து ஒரு பழக்கமான நண்பர்.

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

body {
background: url(leaves-and-trees.jpg)
}

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

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

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

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

இதோ நீ போ! CSS இன் ஒரு வரியில் சரியாக அளவுள்ள பின்னணி படம்.

மேலும் படிக்க: CSS இல் பின்னணி படத்தை எப்படி அமைப்பது

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

CSS பெட்டி நிழலுடன் உங்கள் CSS விளையாட்டு

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

உங்கள் பெட்டிகளுக்கு CSS பெட்டி நிழலுடன் ஊக்கத்தை அளிக்க முயற்சிக்கவும். உங்கள் HTML கூறுகள் எப்போதும் சிறப்பாக இல்லை!

பகிர் பகிர் ட்வீட் மின்னஞ்சல் CSS பெட்டி நிழலை எப்படி பயன்படுத்துவது: 13 தந்திரங்கள் மற்றும் உதாரணங்கள்

சாதுவான பெட்டிகள் சலிப்பாக இருக்கும். சிஎஸ்எஸ் பாக்ஸ்-ஷேடோ எஃபெக்ட் மூலம் அவற்றைத் தெளிவுபடுத்துங்கள்!

அடுத்து படிக்கவும்
தொடர்புடைய தலைப்புகள்
  • நிரலாக்க
  • இணைய மேம்பாடு
  • வலை வடிவமைப்பு
  • CSS
எழுத்தாளர் பற்றி மார்கஸ் மியர்ஸ் III(26 கட்டுரைகள் வெளியிடப்பட்டன)

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

மார்கஸ் மியர்ஸ் III இலிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

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

குழுசேர இங்கே சொடுக்கவும்