CSS Image Opacity
opacity பண்பு ஒரு உறுப்பின் ஒளிப்புகள்தன்மை/கட்புலனாகாத்தன்மையைக் குறிப்பிடுகிறது.
opacity பண்பு 0.0 - 1.0 வரையிலான மதிப்பை எடுக்கலாம்:
- 0.0 - உறுப்பு முற்றிலும் கட்புலனாகாததாக இருக்கும்
- 0.5 - உறுப்பு 50% கட்புலனாகாததாக இருக்கும்
- 1.0 - இயல்புநிலை. உறுப்பு முழுமையாக ஒளிப்புகலாக இருக்கும்
opacity 0.2
opacity 0.5
opacity 1.0 (default)
Example
img {
opacity: 0.5;
}Opacity and :hover
opacity பண்பு பெரும்பாலும் :hover உடன் பயன்படுத்தப்படுகிறது, சுட்டியை நகர்த்தும் போது ஒளிப்புகள்தன்மையை மாற்ற:
Northern Lights
Mountains
Italy
Example
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}Reversed Hover Effect
இங்கே தலைகீழான hover விளைவுக்கான எடுத்துக்காட்டு:
Northern Lights
Mountains
Italy
Example
img:hover {
opacity: 0.5;
}Transparent Boxes
ஒரு உறுப்பின் பின்னணிக்கு கட்புலனாகாத்தன்மையைச் சேர்க்க opacity பண்பைப் பயன்படுத்தும் போது, அனைத்து குழந்தை உறுப்புகளும் அதே கட்புலனாகாத்தன்மையைப் பெறுகின்றன. இது ஒரு கட்புலனாகாத உறுப்புக்குள் உள்ள உரையைப் படிக்க கடினமாக்கும்:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
div {
opacity: 0.3;
}Transparency using background-color
குழந்தை உறுப்புகளுக்கு கட்புலனாகாத்தன்மையைப் பயன்படுத்தாமல் இருக்க, நீங்கள் RGBA மதிப்புடன் கூடிய background-color பண்பைப் பயன்படுத்தலாம்.
RGBA வண்ண மதிப்புகள் ஒரு ஆல்பா சேனலுடன் கூடிய RGB வண்ண மதிப்புகளின் நீட்டிப்பாகும் - இது ஒரு வண்ணத்திற்கான ஒளிப்புகள்தன்மையைக் குறிப்பிடுகிறது.
ஒரு RGBA வண்ண மதிப்பு இவ்வாறு குறிப்பிடப்படுகிறது: rgba(red, green, blue, alpha). ஆல்பா அளவுரு 0.0 (முழுமையாக கட்புலனாகாதது) மற்றும் 1.0 (முழுமையாக ஒளிப்புகலானது) க்கு இடையே உள்ள எண்ணாகும்.
100% opacity
60% opacity
30% opacity
10% opacity
Example
div {
background: rgba(4, 170, 109, 0.3) /* 30% ஒளிப்புகள்தன்மையுடன் கூடிய பச்சை பின்னணி */
}Text in Transparent Box
This is some text that is placed in the transparent box.
Example
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>Example explained
- ஒரு பின்னணி படம் மற்றும் எல்லையுடன் ஒரு
<div>உறுப்பை (class="background") உருவாக்கவும். - முதல்
<div>க்குள் மற்றொரு<div>(class="transbox") உருவாக்கவும். <div class="transbox">0.6 கட்புலனாகாத பின்னணி வண்ணம் மற்றும் எல்லையைக் கொண்டுள்ளது.- கட்புலனாகாத
<div>க்குள், நாம் ஒரு<p>உறுப்புக்குள் சில உரையைச் சேர்க்கிறோம்.
Exercise
opacity பண்பு எதைக் கட்டுப்படுத்துகிறது?
CSS Property
| Property | Description |
|---|---|
| opacity | ஒரு உறுப்பிற்கான ஒளிப்புகள்தன்மை நிலையை அமைக்கிறது |