Opacity in CSS ka use element ki transparency control karne ke liye hota hai.
Opacity in CSS values:
0.0→ element completely transparent hota hai0.5→ element 50% transparent hota hai1.0→ default, element fully visible hota hai
Example:
Opacity and :hover
Opacity in CSS ko :hover ke saath use karke mouse-over par effect diya ja sakta hai.
Example:
Reversed Hover Effect
Hover par opacity kam bhi ki ja sakti hai.
Example:
Transparent Boxes
Opacity in CSS jab element par apply hota hai, to uske child elements bhi transparent ho jaate hain, jisse text read karna difficult ho sakta hai.
Example:
Transparency using background-color
Agar sirf background transparent karna ho (text nahi), to RGBA color use karte hain.
RGBA me alpha value opacity define karti hai:
0.0→ fully transparent1.0→ fully opaque
Example:
Text in Transparent Box
Example:
Example Explained
- Ek
<div>(class=”background”) create kiya jisme background image aur border hai - Uske andar ek aur
<div>(class=”transbox”) banaya transboxka background 0.6 transparent hai- Uske andar
<p>me text add kiya gaya
Opacity in CSS element ki transparency control karne ka simple aur powerful way hai, lekin agar sirf background ko transparent karna ho to RGBA use karna better hota hai taki text clearly visible rahe.
