CSS-da opacity xususiyati orqali yarim shaffoflik
Elementning yarim shaffofligini
opacity xususiyati orqali ham belgilash mumkin.
Ushbu xususiyat 0 dan 1 gacha bo'lgan
kasr qiymatlarini qabul qiladi. Bunda yarim shaffoflik
butun elementga bir vaqtning o'zida taalluqlanadi: uning
matni, foniga va chegarasiga.
Misolni ko'ring:
<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;
}
:
Faraz qiling, sizda ma'lum bir fon rasm mavjud.
Uning ustiga matn, chegarava va foniga ega bo'lgan
ikki blokni joylashtiring. Ushbu bloklarda
opacity orqali yarim shaffoflik bilan
rgba orqali yarim shaffoflik o'rtasidagi
farqni namoyish eting.
