CSS shaffoflik

CSS rasm shaffofligi

opacity xossasi elementning shaffoflik darajasini belgilaydi.

opacity xossasi 0.0 dan 1.0 gacha qiymat qabul qiladi:

0.0 — element to‘liq shaffof bo‘ladi
0.5 — element 50% shaffof bo‘ladi
1.0 — standart. Element to‘liq xira (shaffof bo‘lmagan) bo‘ladi

opacity 0.2

opacity 0.5

opacity 1.0
(default)

Misol

img {
opacity: 0.5;
}

O‘zingiz sinab ko‘ring »

Opacity va :hover

opacity xossasi sichqoncha olib borilganda shaffoflikni o‘zgartirish uchun ko‘pincha :hover bilan ishlatiladi:

Misol

img {
opacity: 0.5;
}

img:hover {
opacity: 1.0;
}

O‘zingiz sinab ko‘ring »

Teskari hover effekti

Mana teskari hover effekti misoli:

Misol

img:hover {
opacity: 0.5;
}

O‘zingiz sinab ko‘ring »

Shaffof bloklar

opacity xossasidan element foniga shaffoflik qo‘shish uchun foydalanganda, barcha bola elementlar bir xil shaffoflikni meros oladi. Bu shaffof element ichidagi matnni o‘qishni qiyinlashtirishi mumkin:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Misol

div {
opacity: 0.3;
}

O‘zingiz sinab ko‘ring »

background-color yordamida shaffoflik

Shaffoflikni bola elementlarga qo‘llanmasligi uchun background-color xossasini RGBA qiymati bilan ishlatishingiz mumkin.

RGBA rang qiymatlari — alfa kanali qo‘shilgan RGB rang qiymatlarining kengaytmasi bo‘lib, u rangning shaffoflik darajasini belgilaydi.

RGBA rang qiymati mana bunday belgilanadi: rgba(red, green, blue, alpha). Bu yerda alfa parametri 0.0 (to‘liq shaffof) va 1.0 (to‘liq xira) orasidagi sondir.

Maslahat: Siz RGBA ranglari haqida CSS Colors bobimizda ko‘proq bilib olasiz.

Quyidagi misol matnga emas, fon rangiga opacity qo‘llaydi:

100% opacity

60% opacity

30% opacity

10% opacity

Misol

div {
background: rgba(4, 170, 109, 0.3) /* Green background with 30% opacity */
}

O‘zingiz sinab ko‘ring »

Shaffof blokdagi matn

Bu shaffof qutiga joylashtirilgan ba’zi matnlar.

Misol

<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}

div.transbox {
margin: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid black;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>
</html>

O‘zingiz sinab ko‘ring »

Misol tahlili

Fon rasmi va chegara bilan <div> element (class="background") yarating.
Birinchi <div> ichida yana bitta <div> (class="transbox") yarating.
<div class="transbox"> elementida 0.6 shaffoflikdagi fon rangi va chegara bor.
Shaffof <div> ichiga <p> elementi orqali bir nechta matn qo‘shamiz.

CSS CSS xossasi

Xususiyat	Tavsif
opacity	Element uchun shaffoflik darajasini belgilaydi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish