ການສະເໜີຫົວຂໍ້

CSS invert()

ການກໍານົດແລະການນໍາໃຊ້ invert() CSS invert()

• ພວກຜົນຂອງຫົວລະບັບ filter ໃຫ້ປ່ຽນແປງສີຂອງພາບ.
• 100% (1) ຈະເຮັດໃຫ້ພາບເປັນສິ່ງທີ່ປ່ຽນແປງຢ່າງສົມບູນ

ຄວາມທີ່ຈະບໍ່ມີຜົນກະທົບ 0% (0)

ບັນທັດ 1

ປ່ຽນແປງສີຂອງພາບ:

#img1 {
  filter: invert(0.3);
}
#img2 {
  filter: invert(70%);
}
#img3 {
  filter: invert(100%);
}

ທົດລອງດູດຄືນ

ບັນທັດ 2

ຈະ invert() ກັບ backdrop-filter ນຳໃຊ້ອຸປະກອນພິມທັງໝົດ:

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

ທົດລອງດູດຄືນ

ສັບພາສາ CSS

invert(amount)

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

ການສະໜັບສະໜູນບິວເຊີບ

ຈຳນວນໃນຕາຕະລາງສະແດງການອອກພະລັງງານຂອງຊາວບິວເຊີບທີ່ເປັນການສະໜັບສະໜູນຂັ້ນສຸດທ້າຍຂອງຫົວລະບັບນັ້ນ.

ຫົວຂໍ້ຫົວລະບັບທີ່ກ່ຽວຂ້ອງ

参考：ປະເພດ CSS filter

参考：ຫົວຂໍ້ຫົວລະບັບ CSS blur()

参考：ຫົວຂໍ້ຫົວລະບັບ CSS brightness()

参考：ຫົວຂໍ້ຫົວລະບັບ CSS contrast()

参考：ຫົວຂໍ້ຫົວລະບັບ CSS drop-shadow()

参考：ຫົວຂໍ້ຫົວລະບັບ CSS grayscale()

参考：ຫົວຂໍ້ຫົວລະບັບ CSS hue-rotate()

参考：ຫົວຂໍ້ຫົວລະບັບ CSS opacity()

参考：ຫົວຂໍ້ຫົວລະບັບ CSS saturate()

参考：CSS sepia() 函数