CSS Background Shorthand

CSS பின்னணி சுருக்கப்பண்பு

CSS பின்னணி சுருக்கப்பண்பு

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

இவ்வாறு எழுதுவதற்குப் பதிலாக:

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

நீங்கள் background சுருக்கப்பண்பைப் பயன்படுத்தலாம்:

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

அனைத்து பின்னணி பண்புகளையும் ஒரே அறிவிப்பில் அமைக்க சுருக்கப்பண்பைப் பயன்படுத்தவும்:

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

💡 உதவிக்குறிப்பு:

background பண்பு பின்வரும் பண்புகளுக்கான சுருக்கப்பண்பாகும்:

  • background-color
  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-attachment
  • background-origin
  • background-clip

பண்பு விவரங்கள்

சில பண்பு மதிப்புகள் இல்லை என்றால், அவை அவற்றின் தொடக்க (இயல்புநிலை) மதிப்புகளாக அமைக்கப்படும்.

⚠️ முக்கியமான குறிப்பு:

சுருக்கப்பண்பைப் பயன்படுத்தும்போது, பண்பு மதிப்புகளின் வரிசை முக்கியமானது. பரிந்துரைக்கப்பட்ட வரிசை: color, image, repeat, attachment, position.

பயிற்சி

❓ CSS பின்னணி சுருக்கப்பண்பின் நோக்கம் என்ன?

ஒரு உறுப்பின் பின்னணி நிறத்தை மட்டும் வரையறுக்க
✗ தவறு! பின்னணி சுருக்கப்பண்பு பல பண்புகளைக் கையாள்கிறது, நிறம் மட்டும் அல்ல
அனைத்து உறுப்புகளுக்கும் இயல்புநிலை ஸ்க்ரோல் நடத்தையை அமைக்க
✗ தவறு! இது background-attachment பண்புக்கானது, சுருக்கப்பண்புக்கானது அல்ல
பின்னணிகளுக்கு சாயல் விளைவுகளைப் பயன்படுத்த
✗ தவறு! சாயல் விளைவுகள் background-image பண்பு மூலம் செய்யப்படுகின்றன
பல பின்னணி பண்புகளை ஒரே அறிவிப்பில் குறிப்பிட
✓ சரி! CSS பின்னணி சுருக்கப்பண்பு பல பின்னணி பண்புகளை ஒரே வரியில் அமைக்க பயன்படுகிறது

அனைத்து CSS பின்னணி பண்புகள்

பண்பு விளக்கம்
background அனைத்து பின்னணி பண்புகளையும் ஒரே அறிவிப்பில் அமைக்கிறது
background-attachment ஒரு பின்னணி படம் நிலையானதா அல்லது பக்கத்தின் மற்ற பகுதிகளுடன் ஸ்க்ரோல் செய்கிறதா என்பதை அமைக்கிறது
background-clip பின்னணியின் வரைதல் பகுதியை குறிப்பிடுகிறது
background-color ஒரு உறுப்பின் பின்னணி நிறத்தை அமைக்கிறது
background-image ஒரு உறுப்பிற்கு பின்னணி படத்தை அமைக்கிறது
background-origin பின்னணி படம்(கள்) எங்கு வைக்கப்படுகின்றன என்பதை குறிப்பிடுகிறது
background-position ஒரு பின்னணி படத்தின் தொடக்க நிலையை அமைக்கிறது
background-repeat ஒரு பின்னணி படம் எவ்வாறு திரும்பத் திரும்ப வரும் என்பதை அமைக்கிறது
background-size பின்னணி படம்(கள்)யின் அளவை குறிப்பிடுகிறது

📚 கற்றல் உதவிக்குறிப்பு:

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