css opacity özelliği, Html elemanlarının şeffaflığını belirlemek için kullanılır. Arka plan resimlerinde ve renklerinde çok kullandığımız bir özelliktir.
Aldığı değerler:
number : Sayısal değer verilir.
initial : Varsayılan değer.( opacity : 1 )
Örnek 1 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 200px;
padding: 5px;
margin-bottom: 20px;
background-color: black;
color: yellow;
}
.one { opacity: 1; }
.two { opacity: .75;}
.three { opacity: .5; }
.four { opacity: .25; }
.five{ opacity: 0;}
.six{
background-color: rgba(0, 0, 0, .75);
color:yellow;
}
</style>
</head>
<body>
<div class="one">
Content One
</div>
<div class="two">
Content Two
</div>
<div class="three">
Content Three
</div>
<div class="four">
Content Four
</div>
<div class="five">
Content Five
</div>
<div class="six">
Content Six
</div>
</body>
</html>
Yukarıdaki örneğimizde görüldüğü gibi opacity özelliğine verdiğimiz değer ile html elemanlarının şeffaflığını artırıp azaltabiliyoruz. Eğer sıfır değeri verirsek eleman yer kaplar ama gözükmez. Verdiğimiz opacity değeri html elementi içinde bulunan diğer elementlerini de etkiler. Eğer sadece verdiğimiz opacity değeri ile elementin sadece kendi background özelliği değişmesini istiyorsak six class ına sahip element gibi değer vermeliyiz…
Örnek 2 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 200px;
padding: 5px;
margin-bottom: 20px;
background-color: black;
color: yellow;
opacity: .33;
}
.one { }
.two { opacity: initial;}
</style>
</head>
<body>
<div class="one">
Content One
</div>
<div class="two">
Content Two
</div>
</body>
</html>
Başka bir yazımızda görüşmek üzere…
