CSS Multiple Backgrounds
CSS ஒரு உறுப்பிற்கு பல பின்னணி படங்களைச் சேர்க்க background-image சொத்து மூலம் அனுமதிக்கிறது.
வெவ்வேறு பின்னணி படங்கள் காற்புள்ளிகளால் பிரிக்கப்படுகின்றன, மேலும் படங்கள் ஒன்றன் மேல் ஒன்றாக அடுக்கப்படுகின்றன, முதல் படம் பார்வையாளருக்கு மிக அருகில் இருக்கும்.
Multiple Backgrounds Example
பின்வரும் எடுத்துக்காட்டில் இரண்டு பின்னணி படங்கள் உள்ளன, முதல் படம் ஒரு பூ (வலது-கீழ் சீரமைக்கப்பட்டது) மற்றும் இரண்டாவது படம் ஒரு காகிதம் போன்ற பின்னணி (மேல்-இடது மூலையில் சீரமைக்கப்பட்டது):
உதவிக்குறிப்பு:
பல பின்னணி படங்களை தனிப்பட்ட பின்னணி சொத்துக்கள் (மேலே உள்ளதைப் போல) அல்லது background shorthand சொத்து மூலம் குறிப்பிடலாம்.
Example 1: Using Individual Properties
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}Example 2: Using Shorthand Property
#example1 {
background: url(img_flwr.gif) right bottom no-repeat,
url(paper.gif) left top repeat;
}கவனத்திற்குரியது:
பல பின்னணி படங்களை குறிப்பிடும்போது, காற்புள்ளிகளை சரியாகப் பயன்படுத்துவது முக்கியம். ஒவ்வொரு பின்னணி வரையறையும் காற்புள்ளியால் பிரிக்கப்பட வேண்டும்.
Demonstration
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
மேலே உள்ள பாக்ஸ் இரண்டு பின்னணி படங்களைக் காட்டுகிறது: ஒரு சிறிய பூ வலது கீழ் மூலையிலும், ஒரு காகிதம் போன்ற வடிவம் முழு பின்னணியிலும் மீண்டும் மீண்டும் தோன்றுகிறது.
CSS Advanced Background Properties
பின்வரும் அட்டவணை CSS மேம்பட்ட பின்னணி சொத்துக்களை பட்டியலிடுகிறது:
| Property | Description |
|---|---|
| background | அனைத்து பின்னணி சொத்துக்களையும் ஒரு அறிவிப்பில் அமைக்கும் shorthand சொத்து |
| background-clip | பின்னணியின் வரைதல் பகுதியை குறிப்பிடுகிறது |
| background-image | ஒரு உறுப்பிற்கு ஒன்று அல்லது அதற்கு மேற்பட்ட பின்னணி படங்களை குறிப்பிடுகிறது |
| background-origin | பின்னணி படம்(கள்) எங்கு வைக்கப்படுகின்றன என குறிப்பிடுகிறது |
| background-size | பின்னணி படம்(கள்)யின் அளவை குறிப்பிடுகிறது |
Exercise
CSS இல் பல பின்னணி படங்களைப் பயன்படுத்தும்போது, பின்வருவனவற்றில் எது சரியானது?