CSS'te opacity Özelliği ile Yarı Saydamlık
Bir öğenin yarı saydamlığı
opacity özelliği ile de ayarlanabilir.
Bu özellik de 0'dan 1'e kesirli değerler
alır. Bu durumda, yarı saydamlık öğenin tamamına
aynı anda uygulanır: metnine, arka planına
ve kenarlığına.
Örneğe bakın:
<div id="parent">
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
</div>
#parent {
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
padding: 30px;
}
#elem {
width: 300px;
height: 200px;
padding: 10px;
font-size: 50px;
font-weight: bold;
border: 20px solid red;
background: black;
color: red;
opacity: 0.7;
}
:
Elinizde bir arka plan resmi olduğunu varsayalım.
Üzerine metin, kenarlık ve arka plana sahip iki blok
yerleştirin. Bu bloklar üzerinde
opacity ile ve rgba ile yarı saydamlık
arasındaki farkı gösterin.
