CSS பின்னணிகள்

CSS பின்னணி பண்புத்தொகுப்புகள் உறுப்புகளுக்கு பின்னணி விளைவுகளைச் சேர்க்கப் பயன்படுகின்றன.

இந்த அத்தியாயங்களில், பின்வரும் CSS பின்னணி பண்புத்தொகுப்புகளைப் பற்றி நீங்கள் கற்றுக் கொள்வீர்கள்:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (குறுக்குவழிப் பண்புத்தொகுப்பு)

CSS background-color

background-color பண்புத்தொகுப்பு ஒரு உறுப்பின் பின்னணி வண்ணத்தைக் குறிக்கிறது.

எடுத்துக்காட்டு

ஒரு பக்கத்தின் பின்னணி வண்ணம் இப்படி அமைக்கப்படுகிறது:

body {
  background-color: lightblue;
}

CSS உடன், ஒரு வண்ணம் பெரும்பாலும் பின்வருமாறு குறிப்பிடப்படுகிறது:

• செல்லுபடியாகும் வண்ணப் பெயர் - "red" போன்றது
• HEX மதிப்பு - "#ff0000" போன்றது
• RGB மதிப்பு - "rgb(255,0,0)" போன்றது

சாத்தியமான வண்ண மதிப்புகளின் முழுமையான பட்டியலுக்கு CSS வண்ண மதிப்புகளைப் பாருங்கள்.

மற்ற உறுப்புகள்

நீங்கள் எந்த HTML உறுப்புகளுக்கும் பின்னணி வண்ணத்தை அமைக்கலாம்:

எடுத்துக்காட்டு

இங்கே, <h1>, <p>, மற்றும் <div> உறுப்புகள் வெவ்வேறு பின்னணி வண்ணங்களைக் கொண்டிருக்கும்:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

ஒளிபுகு தன்மை / வெளிப்படைத்தன்மை

opacity பண்புத்தொகுப்பு ஒரு உறுப்பின் ஒளிபுகு தன்மை/வெளிப்படைத்தன்மையைக் குறிக்கிறது. இது 0.0 - 1.0 வரையிலான மதிப்பை எடுக்கலாம். குறைந்த மதிப்பு, அதிக வெளிப்படைத்தன்மை:

எடுத்துக்காட்டு

div {
  background-color: green;
  opacity: 0.3;
}

RGBA பயன்படுத்தி வெளிப்படைத்தன்மை

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

நீங்கள் எங்கள் CSS வண்ணங்கள் அத்தியாயத்திலிருந்து கற்றுக்கொண்டீர்கள், நீங்கள் RGB ஐ ஒரு வண்ண மதிப்பாகப் பயன்படுத்தலாம். RGB க்கு கூடுதலாக, நீங்கள் ஒரு ஆல்பா சேனலுடன் (RGBA) ஒரு RGB வண்ண மதிப்பைப் பயன்படுத்தலாம் - இது ஒரு வண்ணத்திற்கான ஒளிபுகு தன்மையைக் குறிக்கிறது.

ஒரு RGBA வண்ண மதிப்பு பின்வருமாறு குறிப்பிடப்படுகிறது: rgba(red, green, blue, alpha). ஆல்பா அளவுருவானது 0.0 (முழுமையாக வெளிப்படையான) மற்றும் 1.0 (முழுமையாக ஒளிபுகாத) க்கு இடையே உள்ள எண்ணாகும்.

எடுத்துக்காட்டு

div {
  background: rgba(0, 128, 0, 0.3) /* 30% ஒளிபுகு தன்மையுடன் பச்சை பின்னணி */
}

CSS பயிற்சிகள்

div {
  : green;
}

CSS பின்னணி வண்ண பண்புத்தொகுப்பு