Jassif Team Institution

CSS background-clip Property

CSS background-clip சொத்து பின்னணி (நிறம், படம் அல்லது கிரேடியண்ட்) ஒரு உறுப்பிற்குள் எவ்வளவு தூரம் நீட்டிக்கப்பட வேண்டும் என வரையறுக்கிறது.

இந்த சொத்து பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

• border-box - பின்னணி border க்கு பின்னால் நீண்டிருக்கும். இது இயல்புநிலை
• padding-box - பின்னணி border இன் உள் விளிம்பில் நீண்டிருக்கும்
• content-box - பின்னணி content box இன் விளிம்பில் நீண்டிருக்கும்

Example

பின்னணி படத்துடன் background-clip சொத்தைப் பயன்படுத்துதல்:

#div1 {
  border: 5px dotted black;
  padding: 35px;
  background-image: url(paper.gif);
  background-clip: border-box;
}

#div2 {
  border: 5px dotted black;
  padding: 35px;
  background-image: url(paper.gif);
  background-clip: padding-box;
}

#div3 {
  border: 5px dotted black;
  padding: 35px;
  background-image: url(paper.gif);
  background-clip: content-box;
}

Example

பின்னணி நிறத்துடன் background-clip சொத்தைப் பயன்படுத்துதல்:

#div1 {
  border: 5px dotted black;
  padding: 35px;
  background-color: lightblue;
  background-clip: border-box;
}

#div2 {
  border: 5px dotted black;
  padding: 35px;
  background-color: lightblue;
  background-clip: padding-box;
}

#div3 {
  border: 5px dotted black;
  padding: 35px;
  background-color: lightblue;
  background-clip: content-box;
}

Exercise

CSS Advanced Background Properties

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