Opacity and Alpha Colors
Opacity మరియు Alpha Colors
CSSలో opacity ఒక element ఎంత పారదర్శకంగా కనిపించాలో నిర్ణయిస్తుంది. దీని విలువ 0 నుంచి 1 వరకు ఉంటుంది.
- opacity: 1; అంటే పూర్తిగా కనిపిస్తుంది.
- opacity: 0.5; అంటే 50% పారదర్శకంగా కనిపిస్తుంది.
- opacity: 0; అంటే element కనిపించదు, కానీ అది pageలో ఉంటుంది.
Alpha color అనేది colorలోని పారదర్శకతను కూడా నిర్వచించే color. RGB colorలో alpha చేర్చడానికి rgba(), HSL colorలో alpha చేర్చడానికి hsla() ఉపయోగించవచ్చు.
Opacity మరియు Alpha Color మధ్య తేడా
opacityను ఒక elementకు ఇస్తే ఆ elementలోని background, text మరియు child elements అన్నీ పారదర్శకమవుతాయి. కానీ rgba() లేదా hsla()లో alpha valueను ఉపయోగిస్తే ఆ specific color మాత్రమే పారదర్శకమవుతుంది. అందువల్ల text స్పష్టంగా ఉంచి backgroundను మాత్రమే translucentగా చేయవచ్చు.
Alpha value ఎలా పనిచేస్తుంది?
RGBAలో చివరి value alpha value. ఉదాహరణకు rgba(30, 136, 229, 0.35)లో 0.35 అంటే color 35% కనిపిస్తుంది. మిగిలిన భాగంలో వెనుక ఉన్న page color కనిపిస్తుంది.
ఉపయోగాలు
- Transparent notice లేదా overlay తయారు చేయడానికి
- Card backgroundను softగా చూపించడానికి
- Hover సమయంలో elementను కొద్దిగా fade చేయడానికి
- Text చదవగలిగేలా ఉంచి backgroundకు transparency ఇవ్వడానికి
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Opacity and Alpha Colors</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f5f9;
padding: 24px;
}
.alpha-box {
background-color: rgba(30, 136, 229, 0.35);
color: #0f172a;
padding: 16px;
margin-bottom: 16px;
border: 2px solid #1e88e5;
}
.opacity-box {
background-color: #1e88e5;
color: white;
padding: 16px;
opacity: 0.45;
}
</style>
</head>
<body>
<div class="alpha-box">
<strong>Alpha color:</strong> background మాత్రమే translucentగా ఉంది.
</div>
<div class="opacity-box">
<strong>Opacity:</strong> మొత్తం box మరియు text translucentగా ఉన్నాయి.
</div>
</body>
</html>మొదటి boxలో rgba() ఉపయోగించాం. కాబట్టి background మాత్రమే translucentగా ఉంటుంది. రెండవ boxలో opacity: 0.45 ఉంది. కాబట్టి మొత్తం box, అందులోని text కూడా translucentగా కనిపిస్తాయి.
Simple Explanation
Opacity ఒక పూర్తి element యొక్క visibilityను మార్చుతుంది. rgba() మరియు hsla() color valuesలోని alpha భాగం మాత్రం ఆ color ఎంత transparentగా ఉండాలో చెబుతుంది.
Text స్పష్టంగా ఉండాలి, కానీ background కొద్దిగా transparentగా కనిపించాలి అనుకుంటే alpha color ఉపయోగించండి. Elementలోని text మరియు background రెండూ fade కావాలి అనుకుంటే opacity property ఉపయోగించండి.
Real-Life Example
ఒక గాజు తలుపును ఊహించండి. గాజు వెనుక ఉన్న వస్తువులు కొంత కనిపిస్తాయి, కానీ గాజుపై రాసిన text స్పష్టంగా ఉండవచ్చు. ఇది alpha color లాంటిది. మొత్తం తలుపు, దానిపై ఉన్న text రెండూ ఒకేసారి మసకబారితే అది opacity property లాంటిది.
Code Examples
rgba() మరియు opacityను పోల్చడం
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Opacity and Alpha Colors</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f5f9;
padding: 24px;
}
.alpha-box {
background-color: rgba(30, 136, 229, 0.35);
color: #0f172a;
padding: 16px;
margin-bottom: 16px;
border: 2px solid #1e88e5;
}
.opacity-box {
background-color: #1e88e5;
color: white;
padding: 16px;
opacity: 0.45;
}
</style>
</head>
<body>
<div class="alpha-box">
<strong>Alpha color:</strong> background మాత్రమే translucentగా ఉంది.
</div>
<div class="opacity-box">
<strong>Opacity:</strong> మొత్తం box మరియు text translucentగా ఉన్నాయి.
</div>
</body>
</html>.alpha-boxలో rgba() ఉపయోగించడం వల్ల blue background మాత్రమే 35% alphaతో కనిపిస్తుంది. Text మాత్రం సాధారణంగా readableగా ఉంటుంది. .opacity-boxలో opacity: 0.45 ఉండటం వల్ల backgroundతో పాటు text కూడా translucentగా మారుతుంది.
Browserలో light gray page కనిపిస్తుంది. మొదటి boxలో blue background మసకగా కనిపిస్తూ text స్పష్టంగా ఉంటుంది. రెండవ blue box మరియు దాని white text రెండూ translucentగా కనిపిస్తాయి.
Line-by-Line Explanation
ఈ selector alpha-box class ఉన్న divను ఎంచుకుంటుంది.
Blue backgroundకు rgba() ఉపయోగించాం. చివరి value 0.35 కాబట్టి background 35% alphaతో translucentగా కనిపిస్తుంది. ఈ declaration textను పారదర్శకంగా చేయదు.
Boxలోని textకు dark color ఇస్తుంది. Alpha backgroundపై text readableగా ఉండటానికి ఇది సహాయపడుతుంది.
Text చుట్టూ లోపలి ఖాళీని ఇస్తుంది. ఇది exampleను సులభంగా చూడటానికి ఉపయోగించిన spacing declaration.
ఈ selector opacity-box class ఉన్న రెండవ divను ఎంచుకుంటుంది.
రెండవ boxకు సాధారణ opaque blue background ఇస్తుంది.
రెండవ boxలోని textను whiteగా చూపిస్తుంది.
మొత్తం opacity-boxను 45% visibleగా చేస్తుంది. అందువల్ల background మరియు దాని లోపల ఉన్న text రెండూ translucentగా కనిపిస్తాయి.
ఈ HTML divకు alpha-box class ఇస్తుంది. అందువల్ల .alpha-box CSS rules ఈ elementకు వర్తిస్తాయి.
ఈ divకు opacity-box class ఇస్తుంది. అందువల్ల opacity: 0.45 సహా ఆ class యొక్క CSS rules వర్తిస్తాయి.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try Opacity and Alpha Colors</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #e2e8f0;
padding: 24px;
}
.notice {
background-color: rgba(16, 185, 129, 0.35);
color: #064e3b;
padding: 20px;
margin-bottom: 16px;
}
.fade-notice {
background-color: #10b981;
color: white;
padding: 20px;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="notice">Only my background uses an alpha color.</div>
<div class="fade-notice">My whole element uses opacity.</div>
</body>
</html>Practice
Practice: practice_codeలోని .message backgroundను alpha colorగా మార్చండి. Text clearగా ఉండాలి; మొత్తం elementకు opacity ఇవ్వకండి.
Hint: background-colorలో rgba() ఉపయోగించండి. 40% transparent అంటే 60% visible, కాబట్టి alpha valueను 0.6గా ప్రయత్నించండి.
Common Mistakes
opacity: 40%; అని రాయడం. opacity property సాధారణంగా 0 నుంచి 1 మధ్య number valueను తీసుకుంటుంది.
opacity: 0.4; అని రాయండి. 40% visibility కోసం 0.4 ఉపయోగించాలి.
Background మాత్రమే transparent కావాలనుకుని మొత్తం elementకు opacity ఇవ్వడం. దీని వల్ల text కూడా మసకబారుతుంది.
Text clearగా ఉంచాలంటే background-color: rgba(…); లేదా hsla(…);లో alpha value ఉపయోగించండి.
rgba()లో alpha valueను మర్చిపోవడం, ఉదాహరణకు rgba(30, 136, 229) అని రాయడం.
RGBAలో red, green, blue values తర్వాత alpha value కూడా ఇవ్వండి. ఉదాహరణ: rgba(30, 136, 229, 0.35).
Alpha valueను 0 నుంచి 1 పరిధికి బయట ఇవ్వడం, ఉదాహరణకు rgba(30, 136, 229, 2).
Alpha valueను 0 మరియు 1 మధ్య ఉంచండి. 0 పూర్తిగా transparent, 1 పూర్తిగా opaque.
Interview Questions
CSSలో opacity property ఏమి చేస్తుంది?
Answer: ఒక element మొత్తం ఎంత visibleగా ఉండాలో opacity నిర్ణయిస్తుంది. దీని విలువ సాధారణంగా 0 నుంచి 1 మధ్య ఉంటుంది.
rgba()లో చివరి value ఏమి సూచిస్తుంది?
Answer: చివరి value alpha value. అది color యొక్క transparency లేదా visibilityని సూచిస్తుంది.
opacity మరియు rgba() మధ్య ప్రధాన తేడా ఏమిటి?
Answer: opacity మొత్తం element మరియు దాని contentపై ప్రభావం చూపుతుంది. rgba()లో alpha value ఆ specific colorపై మాత్రమే ప్రభావం చూపుతుంది.
opacity: 0 అంటే element తొలగించబడుతుందా?
Answer: కాదు. Element కనిపించదు, కానీ అది documentలో ఉంటుంది మరియు దాని layout space సాధారణంగా కొనసాగుతుంది.
Exam Questions
opacity: 0.5; అంటే ఏమిటి?
Answer:
Element సుమారు 50% visibleగా కనిపిస్తుంది.
Background మాత్రమే translucentగా ఉండి text clearగా ఉండాలంటే ఏది ఉపయోగించాలి?
Answer:
background-colorలో rgba() లేదా hsla() alpha color ఉపయోగించాలి.
క్రింది declarationలో alpha value ఏది? background-color: rgba(255, 0, 0, 0.25);
Answer:
0.25 alpha value. ఇది red backgroundను 25% visibleగా చేస్తుంది.
opacity value 1 మరియు 0 మధ్య తేడా ఏమిటి?
Answer:
1 అంటే పూర్తిగా opaque లేదా పూర్తిగా visible. 0 అంటే పూర్తిగా transparent.
Quick Revision
- opacity మొత్తం element transparencyని మార్చుతుంది.
- opacity: 1 పూర్తిగా visible, opacity: 0 పూర్తిగా transparent.
- rgba() మరియు hsla()లో alpha value color transparencyని నియంత్రిస్తుంది.
- Background మాత్రమే transparent కావాలంటే alpha color ఉపయోగించండి.
- Textతో పాటు మొత్తం element fade కావాలంటే opacity ఉపయోగించండి.