ຫົວຂໍ້ຫຼັກ CSS sepia()

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

CSS sepia() ຫົວຂໍ້ຫຼັກສະແດງພາບສະແດງສະແດງສີຫຼັງ (ສີຫຼັງທີ່ຫຼາຍຫຼາຍຫຼາຍຫຼາຍ).

  • 100%（ຫຼື 1）ຈະເຮັດໃຫ້ພາບສະແດງເປັນສີຫຼັງຄົງ.
  • 0%（ຫຼື 0）ຈະບໍ່ມີຜົນກະທົບ

ກໍານົດ

ກໍານົດ 1

ການຕັ້ງຄວາມສີຫຼັງສິ່ງພາບທີ່ຫຼາຍຫຼາຍ.

#img1 {
  filter: sepia(1);
}
#img2 {
  filter: sepia(60%);
}
#img3 {
  filter: sepia(0.4);
}

ທົດລອງດີຕະຫຼອດ

ກໍານົດ 2

ສະແດງ sepia() ກັບ backdrop-filter ການປະສົມສັບສິນ

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

ທົດລອງດີຕະຫຼອດ

ສັບສິນສະແດງ CSS

sepia(amount)
ຄຳຕັ້ງສະຫຼຸບ ສະແດງຄວາມ
amount

ຄຳຕັ້ງສະຫຼຸບ. ຕິດຕາມຄຳຕັ້ງສະຫຼຸບສີຫຼັງສາມາດເປັນໂຕນຫຼືສິບສອງ.

100%（ຫຼື 1）ຈະເຮັດໃຫ້ປະກອບສິ່ງສະແດງເປັນສີຫຼັງ.

0%（ຫຼື 0）ສະແດງສະນັບພາບແບບຕົ້ນ (ບໍ່ມີຜົນກະທົບ). ຄຳຕັ້ງສະຫຼຸບແມ່ນ 0.

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

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

ການສະໜັບສະໜູນບັນດາບັນຊີ

ຈຳນວນໃນຕາຕະລາງສະແດງຄະແນນຂອງບັນດາບັນຊີທີ່ສະໜັບສະໜູນຫົວຂໍ້ຫຼັກນີ້ຄັ້ງທຳອິດ.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

ຫົວຂໍ້ຫຼັກບັນດາຫຼັກ

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

ກ່ຽວກັບ:ຫົວຂໍ້ຫຼັກ CSS blur()

ກ່ຽວກັບ:ຫົວຂໍ້ຫຼັກ CSS brightness()

ກ່ຽວກັບ:ຫົວຂໍ້ຫຼັກ CSS contrast()

ກ່ຽວກັບ:ຫົວຂໍ້ຫຼັກ CSS drop-shadow()

ກ່ຽວກັບ:ຫົວຂໍ້ຫຼັກ CSS grayscale()

ກ່ຽວກັບ:ຫົວຂໍ້ຫຼັກ CSS hue-rotate()

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວຫຼັກ CSS invert()

ກ່ຽວກັບ:ການຕັດສິນທີ່ວ່າ opacity()

ກ່ຽວກັບ:ການຕັດສິນທີ່ວ່າ saturate()