CSS opacity() 函数

ການອະທິບາຍແລະການນຳໃຊ້

CSS opacity() ການນຳໃຊ້ຫົວຂໍ້ຈຸດມະນາດເພື່ອປະຕິບັດຜົນກະທົບຄວາມແປກກະຈາຍ.

  • 100%（ຫຼື 1）ຈະບໍ່ມີຜົນກະທົບ
  • 50%（ຫຼື 0.5）ຈະເຮັດໃຫ້ປັດຈຸບັນປະຈຳ 50%.
  • 0%（ຫຼື 0）ຈະເຮັດໃຫ້ປັດຈຸບັນສົມບູນປະຈຳ.

ຄວາມຄິດ

ຄວາມຄິດທີ 1

ການຕັ້ງຄວາມແປກກະຈາຍສະແດງພາບ:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

ການທົດລອງຄືນ

ຄວາມຄິດທີ 2

ຈະ opacity() ກັບ backdrop-filter ການນຳໃຊ້ປະສົມປະສານ:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: opacity(50%);
  backdrop-filter: opacity(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

ການທົດລອງຄືນ

ຈຸດມະນາດ CSS

opacity(amount)
ຄຳນວນ ການອະທິບາຍ
amount

ຈະເປັນການເລືອກ. ການກໍານົດຄຳນວນຄວາມແປກກະຈາຍຫຼືສາມາດ. 0%（ຫຼື 0）ຈະເຮັດໃຫ້ປັດຈຸບັນສົມບູນປະຈຳ.

100%（ຫຼື 1）ຈະສະແດງສະນັບພາບແບບຕົວເລື່ອງບໍ່ມີຜົນກະທົບ（ບໍ່ມີຜົນສະແດງ）。ຄູ່ກະຈາຍແມ່ນ 1.

ຂໍ້ມູນດ້ານເຕັກນິກ

ສະຖານະການ: CSS Filter Effects Module Level 1

ການສະໜັບສະໜູນຕົວເລື່ອງ

ຈຳນວນທີ່ຢູ່ໃນຕາລະບົບການເບິ່ງຂອງຕົວເລື່ອງພາສາຈີນລະບຸບຫຼັງທີ່ເປັນຜູ້ຮັບການສະໜັບສະໜູນຄັດຄ້ານທີໜຶ່ງ.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

ຫົວຂໍ້ຫຼັກ

ກ່ຽວກັບ:ປະເພດ CSS filter

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວຫົວພາສາຈີນລະບຸບຫຼັງ blur()

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວຫົວພາສາຈີນລະບຸບຫຼັງ brightness()

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວຫົວພາສາຈີນລະບຸບຫຼັງ contrast()

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວຫົວພາສາຈີນລະບຸບຫຼັງ drop-shadow()

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວຫົວພາສາຈີນລະບຸບຫຼັງ grayscale()

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວຫົວພາສາຈີນລະບຸບຫຼັງ hue-rotate()

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວຫົວພາສາຈີນລະບຸບຫຼັງ

ກ່ຽວກັບ:ຕົວເລກ saturate()

ກ່ຽວກັບ:ຕົວເລກ sepia()