CSS Opacity

opacity шинж чанарт элементийн тунгалаг байдлыг зааж өгнө.

Тунгалаг зураг /Transparent/

opacity шинж чанарт багаас илүү тод гэсэн утгыг 0.0 - 1.0-н хооронд зааж өгнө.

opacity 1
Анхны утга /Default/

opacity 0.5

opacity 0.2

 

<style>
img {
  opacity: 0.5;
}
</style>

Тунгалаг зураг Hover Effect

opacity шинж чанартай :hover сонгогчийг хамт ашиглах боломжтой.

 

<style>
img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}
</style>

Тунгалаг BOX

Бид opacity шинж чанарыг элементийн дэвсгэрт ашиглахад тухайн элементийн бүх хүү элемент тунгалаг байдлыг удамшуулан авдаг.

<style>
div {
  background-color: #3f9ce8;
  padding: 10px;
}
div.neg {
  opacity: 0.1;
}
div.hoer {
  opacity: 0.3;
}
div.guraw {
  opacity: 0.6;
}
</style>

Тунгалаг байдал RGBA

Хэрэв opacity шинж чанарыг хүү элементэд зөвшөөрөхгүй, зөвхөн арын дэвсгэрт утга олгохыг хүсвэл RGBA өнгөний утгыг ашиглаарай.

<style>
div {
  background: rgb(63, 156, 232);
  padding: 10px;
}

div.neg {
  background: rgba(63, 156, 232, 0.1);
}

div.hoer {
  background: rgba(63, 156, 232, 0.3);
}

div.guraw {
  background: rgba(63, 156, 232, 0.6);
}
</style>

Сэтгэгдэлүүд