ກົນລະບຽບ contrast()

ການກໍານົດແລະການນໍາໃຊ້

CSS contrast() ກົນລະບຽບ filter ໃຊ້ເພື່ອປັບປຸງຄວາມສະມັດພາບຂອງຫົວອອກ.

  • 0% ຈະເຮັດໃຫ້ພາບເປັນສີສີຂຽວທັງໝົດ
  • 100%（ຫຼື 1）ແມ່ນຄູ່ກະຈາຍທີ່ເປັນພາບແບບຕົ້ນເຫຼົ່າ
  • ຈຳນວນທີ່ຫຼາຍກວ່າ 100% ຈະເພີ່ມຄວາມສະມັດພາບການ
  • ຈຳນວນທີ່ຕໍ່າກວ່າ 100% ຈະຫຼຸດຄວາມສະມັດພາບການ

ບັນທັງ

ບັນທັງ 1

ການເພີ່ມຕື່ມແລະຫຼຸດລົງຄວາມສະມັດພາບການຂອງພາບ

#img1 {
  filter: contrast(150%);
}
#img2 {
  filter: contrast(50%);
}

ທ້າທາຍຄວາມສະຫຼາກຂອງເຂົາເຈົ້າ

ບັນທັງ 2

ກວດສອບ contrast() ພາຍໃນ backdrop-filter ການຮ່ວມນຳສະໜັບສະໜູນ

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

ທ້າທາຍຄວາມສະຫຼາກຂອງເຂົາເຈົ້າ

ກົນລະບຽບ CSS

contrast(amount)
ຈຳນວນ ອະທິບາຍ
amount

ທາງເລືອກ. ກຳນົດຈຳນວນຄວາມສະມັດພາບການ, ສາມາດເປັນຈຳນວນຕາມລຳດັບຫຼືສີເບີກ.

0% ຈະເຮັດໃຫ້ຫົວອອກຄົນເປັນສີສີຂຽວ.

100%（ຫຼື 1）ແມ່ນຄູ່ກະຈາຍທີ່ເປັນພາບແບບຕົ້ນເຫຼົ່າ (ບໍ່ມີຜົນກະທົບ).

ຈຳນວນທີ່ຫຼາຍກວ່າ 100% ຈະເພີ່ມຄວາມສະມັດພາບການ, ຈຳນວນທີ່ຕໍ່າກວ່າ 100% ຈະຫຼຸດຄວາມສະມັດພາບການ.

ລາຍລະອຽດດ້ານເຕັກນິກ

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

ການສະໜັບສະໜູນບັນດາຫົວໜ້າ

ຈຳນວນໃນຕາລະບັນດາສາມາດບອກກັບບັນດາວຽງບັນດາຊົນປະຈຳບັນດາວຽງທີ່ເປັນການສະໜັບສະໜູນສະບາຍຢ່າງເຕັມສ່ວນທັງໝົດຂອງກົນລະບຽບນັ້ນ.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

ບາງເວັບໄຊທີ່ກ່ຽວຂ້ອງ

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

ກ່ຽວກັບ:ກົນລະບຽບ blur()

ກ່ຽວກັບ:ກົນລະບຽບ brightness()

ກ່ຽວກັບ:ກົນລະບຽບ drop-shadow()

ກ່ຽວກັບ:ກົນລະບຽບ grayscale()

ກ່ຽວກັບ:ກົນລະບຽບ hue-rotate()

ກ່ຽວກັບ:ກົນລະບຽບ invert()

ກ່ຽວກັບ:ກົນລະບຽບ opacity()

ກ່ຽວກັບ:ຕົວເລື່ອງ saturate() CSS

ກ່ຽວກັບ:ຕົວເລື່ອງ sepia() CSS