Opacity/Transparency In CSS In Hindi – Is Tutorial Me Hamne CSS Ki Opacity Property Ko With Example Explain Kiya Hai , Ham Janege Ki Opacity Property Kaha Aur Kyo Use Ki Jati Hai |
Opacity CSS Ki Bahut Important Property Hai Jo Bahut Jyada Use Ki Jati Hai |
CSS Opacity / Transparency In Hindi
Contents
Opacity Property Kisi Element Ki Opacity/Transparency Ko Control Krne Ke Liye Use Ki Jati Hai, Opacity Property Ki Value 0 Se 1 Tak Hoti Hai |
Example :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
opacity: 0.8;
}
p{
opacity : 0.7;
}
</style>
</head>
<body>
<h1>Master Programing</h1>
<p>Master programming is a website that enables people that aren't well versed in English to learn programming
languages like Python, C, C++, JAVA, CSS, HTML, JavaScript, PHP in HINDI. Masterprograming.com provides all
the Programming Language education for ABSOLUTELY FREE OF COST.
</p>
</body>
</html>
Output :
Hamne <h1> And <p> Ke Liye Opacity Set Ki Hai Aur Dekha Ki Kese In Elements Transparency Change Hui Hai |
Note : Low opacity Value Wala Element Jyada Transparent Hota Hai |
Transparent Image In CSS In Hindi
Ek Image Lete Hai Aur Uske Liye Opacity Property Ki Value Set Karke Dekhte Hai |
Example : Hamne Image Pexel Website Se Li Hai , Aap Apni Image Ka Path src Me Set Kar Skte Hai |
<!DOCTYPE html>
<html>
<head>
<style>
.a {
opacity: 0.5;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=300">
<hr>
<img class="a" src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=300">
</body>
</html>Output :
Hmne Dekha Ki Kis Tarah Se Kisi Image Ko Transparent Bnaya Ja Skta Hai |
Transparent Hover Effect In CSS In Hindi
Hamne Dekha Ki Opacity Property Ki Help Se Ham Kisi Element Ko Transparent Bna Skte Hai , But Mostly Websites Me Ham Dekhte Hai Ki Jab Element Par Mouse Le Jaya Jata Hai Matalab Mouse-Over Kiya Jata Hai To Us Element Ki Transparency Change Hoti Hai , Jisse Ki Web Page Aur Bhi Jyada Attractive Lagta Hai |
To Web Pages Ko Attractive Banane Ke Liye Opacity Ke Sath :Hover Selector Ka Bhi Use Kiya Jata Hai Jise Transparent Hover Effect Kahte Hai |
Example : Tin Images Lete Hai Aur Unke Liye opacity 0.5 Set Karte Hai , Aur Hover Krne Par Opacity 1 Set Krte Hai|
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1>Transparent Hover Effect</h1>
<img src="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200">
<img src="https://images.pexels.com/photos/247431/pexels-photo-247431.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200" >
<img src="https://images.pexels.com/photos/68147/waterfall-thac-dray-nur-buon-me-thuot-daklak-68147.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200">
</body>
</html>Output :
Transparent Box In CSS In Hindi
Jab Kisi Element Ke Background Ko Transparent Krne Ke Liye Opacity Property Set Ki Jati Hai To Yah Us Element Ke Child Ko Bhi Inherit Kar Leti Hai Jisse Uske Andar Ka Content Read Karna Kai Bar Muskil Ho Jata Hai |
4 Div Lete Hai Aur Unke Liye Different-Different opacity Property Set Kar Ke Dekhte Hai |
Example :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: red;
padding: 10px;
}
div.first {
opacity: 0.2;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Transparent Box</h1>
<div class="first"><p>opacity 0.2</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>
</body>
</html>Output :
Output Me Ham Dekh Rhe Hai Ki Background Ke Sath-Sath Andar Ka Content Bhi Transparent Ho Gya Hai , Jisse Use Read Krna Bhi Muskil Ho Rha Hai |
Transparency using RGBA In CSS In Hindi
Jaisa Ki Pichhle Topic Me Hamne Dekha Ki Kisi Element Ke Background Transparent Krne Ke Liye Jab opacity Property Ka Use Kiya Jata Hai To Background Ke Sath Uske Elment Ke Andar Ka Content Bhi Transparent Ho Jata Hai Jisse Use Read Krne Me Muskil Hoti Hai, Is Presani Se Bachne Ke Liye Ham Transparency Using RGBA Use Krte Hai |
CSS Colors Tutorial Me Hmne Pda Tha Ki Kese RGB Value Ki Help Se Ham Kisi Element Ko Color De Skte Hai |
Synatx For Set Opacity Using RGBA : rgba(no, no, no, alpha) , alpa Ki Value Opacity Property Ki Value Batati Hai Jo Ki 0 Se 1 Ke Bich Me Ho Skti Hai Aue no Ki Value 0 Se 255 Tak Ho Skti Hai |
Example :
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(255, 0,0);
padding: 10px;
}
div.first {
background: rgba(255, 0, 0, 0.1);
}
div.second {
background: rgba(255, 0, 0, 0.3);
}
div.third {
background: rgba(255, 0, 0, 0.6);
}
</style>
</head>
<body>
<p>Opacity With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
</body>
</html>Output :
RGBA Use Krne Se Hmne Dekha Ki Andar Ka Content Proper Dikh Rha Hai , Jise Asani Se Read Kiya Ja Skta Hai |
Text in Transparent Box In CSS In Hindi
Example : Ek Transparent Box Bnate Hai Uske Andar Text Add Kar Ke Dekhte Hai |
<!DOCTYPE html>
<html>
<head>
<style>
div.background {
background-color: red;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: black;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<h2>Master Programing</h2>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Output :
Agr Apko CSS Opacity Property Ko Le Kar Koi Bhi Doubt Ho To Comment Section Me Puchh Skte Hai |
