ຫົວຂໍ້ຫົວຂໍ້ saturate()

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

CSS saturate() ຫົວຂໍ້ຫົວຂໍ້ສົມທົບສະໜອງສະໜາມສຳລັບປະກອບສິ່ງ.

  • 0%（ຫຼື 0）ຈະເຮັດໃຫ້ປະກອບສິ່ງໄດ້ຫຼັງສະທ້ອນ.
  • 100%（ຫຼື 1）ຈະບໍ່ມີຜົນ.
  • 200%（ຫຼື 2）ຈະເຮັດໃຫ້ປະກອບສິ່ງສະໝອງຫຼາຍຫຼາຍ

ຄວາມນຳນວຍງານ

ບົດສະຫຼຸບ 1

ການຕັ້ງຈຳນວນຄວາມສະໝອງສຳລັບບັນດາພາບ:

#img1 {
  filter: saturate(0);
}
#img2 {
  filter: saturate(100%);
}
#img3 {
  filter: saturate(200%);
}

ທົດລອງດຽວທັງເອງ

ບົດສະຫຼຸບ 2

ຈະ saturate() ແລະ backdrop-filter ການບໍລິໂພກປະກອບສຳລັບກັບ:

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

ທົດລອງດຽວທັງເອງ

ສັບສັນ CSS

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

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

0%（ຫຼື 0）ຈະເຮັດໃຫ້ປະກອບສິ່ງໄດ້ຫຼັງສະທ້ອນ.

100%（ຫຼື 1）ຈະບໍ່ມີຜົນ.

ຈຳນວນທີ່ຫຼາຍກວ່າ 100% ຈະໃຫ້ມີຜົນສະທ້ອນຫຼາຍຫຼາຍ.

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

ສະບັບ: CSS Filter Effects Module Level 1

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

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

ບາງຫົວຂໍ້ຄວາມທີ່ຄິດ

ອີງຕາມ:ຄັດຄະແນນສະຖານ filter

ອີງຕາມ:ຫົວຂໍ້ຫົວຂໍ້ blur()

ອີງຕາມ:ຫົວຂໍ້ຫົວຂໍ້ brightness()

ອີງຕາມ:ຫົວຂໍ້ຫົວຂໍ້ contrast()

ອີງຕາມ:ຫົວຂໍ້ຫົວຂໍ້ drop-shadow()

ອີງຕາມ:ຫົວຂໍ້ຫົວຂໍ້ grayscale()

ອີງຕາມ:ຫົວຂໍ້ຫົວຂໍ້ hue-rotate()

ອີງຕາມ:ຫົວຂໍ້ຫົວຂໍ້ invert()

ອີງຕາມ:ຫົວຫນື່ງ CSS opacity()

ອີງຕາມ:ຫົວຫນື່ງ CSS sepia()