ບັນດາທາງ Style filter

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

filter ບັນດາທາງ ທີ່ສະເໜີຜົນຜະລິດພາບຖ່າຍ (ເຊິ່ງການສັບສົນແລະຄວາມຊັບຊ້ອນ).

ອ່ານອີກ:

ຊຸດຊົນຊີບ CSSບັນດາທາງ filter

ຄວາມຄິດຕາມຄົນອື່ນ

ປ່ຽນສີຂອງພາບໃຫ້ຈະປະເສີດ (100% ສີສີນໍ້າ):

document.getElementById("myImg").style.filter = "grayscale(100%)";

ທ້າທາຍຂອງເອງ

ການອັດຕານະນັກງານ

ກັບຄືນ filter ບັນດາທາງ:

object.style.filter

ການກະກຽມບັນດາທາງ filter:

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

ກອງປະຕິບັດ Filter

ສົນທະນາ:Filter ທີ່ນຳໃຊ້ຄະແນນຂອງສາມາດ (ເຊິ່ງ 75%) ຍັງຍອມຮັບອັດຕາສາມາດສຳລັບສະໄໝ (ດັ່ງນັ້ນ 0.75).

Filter ການອະທິບາຍ
none ກຳນົດວ່າບໍ່ມີຜົນຜະລິດ.
blur(px)

ການນຳໃຊ້ຜົນຜະລິດຮູບພາບທີ່ຕືບຕໍ່. ອັດຕາທີ່ຫຼາຍຈະສ້າງຜົນຕືບຕໍ່ຫຼາຍກວ່າ.

如果未规定值，则使用 0。
brightness(%)

调整图像的亮度。

0% 将使图像完全变黑。

100% (1) 是默认值，表示原始图像。

超过 100% 的值将提供更亮的结果。
contrast(%)

调整图像的对比度。

0% 将使图像完全变黑。

100% (1) 是默认值，表示原始图像。

超过 100% 的值将提供对比度较低的结果。
drop-shadow(h-shadow v-shadow blur spread color)

对图像应用投影效果。

可能的值：

h-shadow - 必需。规定水平阴影的像素值。负值将阴影放置在图像的左侧。

v-shadow - 必需。规定垂直阴影的像素值。负值将阴影置于图像上方。

blur - 可选。第三个值，须以像素为单位。为阴影添加模糊效果。较大的值会产生更多的模糊（阴影变得更大更亮）。不允许使用负值。如果未规定值，则使用 0（阴影的边缘是锐利的）。

spread - ທາງເລືອກ. ຈຳນວນທີ່ສີ່, ຕ້ອງໃຫ້ຈະສູງ. ຈຳນວນທີ່ຕົວຫຼາຍຈະເຮັດໃຫ້ຊັ້ນຊູຍຂະຫຍາຍແລະສູງຫຼາຍ, ຈຳນວນທີ່ຕົວຫຼາຍຈະເຮັດໃຫ້ຊັ້ນຊູຍລວມກັບສິນລະປະສານ. ຖ້າບໍ່ໄດ້ກໍານົດ, ຈຳນວນນີ້ຈະເປັນ 0 (ຊັ້ນຊູຍຈະມີຄວາມທຳມະດາ).

ສົນທະນາ:Chrome, Safari ແລະ Opera, ທີ່ອາດຈະມີຊັບສິນທີ່ບໍ່ພຽງສີບສີ; ຖ້າໄດ້ເພີ່ມ, ຈະບໍ່ຈະສະແດງ.

color:ທາງເລືອກ. ການເພີ່ມສີສຳລັບຊັ້ນຊູຍ. ຖ້າບໍ່ໄດ້ກໍານົດ, ສີຈະອາດຕັ້ງຢູ່ບໍ່ (ສົດເສຍຄວາມທຳມະດາ).

ຂໍ້ສັງເກດ:filter ນີ້ຄ້າຍຄືກັບປະສົມປະສານ box-shadow.
grayscale(%)

ປ່ຽນຮູບພາບເປັນສີນຳ.

0% (0) ເປັນມູນຄ່າລະດັບຄົນປະຈຳຕົ້ນໄດ້, ສະແດງວ່າຮູບພາບຕົ້ນເຫຼົ່າ.

100% ຈະເຮັດໃຫ້ຮູບພາບຖືກກັບກັນຢ່າງສົມບູນ (ສຳລັບຮູບພາບສີນຳ).

ສົນທະນາ:不允许负值。
hue-rotate(deg)

ການນຳມາສະແດງສີນຳລະຫວ່າງຮູບພາບ. ຈຳນວນນີ້ຈະການການດັດແປງສະແດງຄືນຮູບພາບວ່າຈະຖືກດັດແປງວ່າຈະຖືກດັດແປງສະແດງຄືນທີ່ມີຄວາມສົມມະນິດຂອງສີນຳ.

0deg ເປັນມູນຄ່າລະດັບຄົນປະຈຳຕົ້ນໄດ້, ສະແດງວ່າຮູບພາບຕົ້ນເຫຼົ່າ.

ສົນທະນາ:ຈຳນວນສູງສູງຈະສູງຫຼາຍກວ່າ 360 ອັງສາ.
invert(%)

ປ່ຽນຮູບພາບເປັນສະແດງຄືນ.

0% (0) ເປັນມູນຄ່າລະດັບຄົນປະຈຳຕົ້ນໄດ້, ສະແດງວ່າຮູບພາບຕົ້ນເຫຼົ່າ.

100% ຈະເຮັດໃຫ້ຮູບພາບຖືກກັບກັນຢ່າງສົມບູນ.

ສົນທະນາ:不允许负值。
opacity(%)

ການຕັ້ງລະດັບຄວາມປະກົດຄວາມບໍ່ສະຫຼາດຂອງຮູບພາບ. ລະດັບຄວາມປະກົດຄວາມສະແດງວ່າ:

0% ແມ່ນມີຄວາມຟອກຢ່າງສົມບູນ.

100% (1) ເປັນມູນຄ່າລະດັບຄົນປະຈຳຕົ້ນໄດ້, ສະແດງວ່າຮູບພາບຕົ້ນເຫຼົ່າ (ບໍ່ມີຄວາມຟອກ).

ສົນທະນາ:不允许负值。

ຂໍ້ສັງເກດ:filter ນີ້ຄ້າຍຄືກັບປະສົມປະສານ opacity.
saturate(%)

ປັບປຸງສະພາວະມູນຄ່າສັດສະພາບຮູບພາບ.

0% (0) ຈະເຮັດໃຫ້ຮູບພາບບໍ່ສົມບູນຢ່າງສົມບູນ.

100% ເປັນມູນຄ່າລະດັບຄົນປະຈຳຕົ້ນໄດ້, ສະແດງວ່າຮູບພາບຕົ້ນເຫຼົ່າ.

ຈຳນວນທີ່ຫຼາຍກວ່າ 100% ຈະສະໜອງຜົນທີ່ສົມບູນຫຼາຍກວ່າ.

ສົນທະນາ:不允许负值。
sepia(%)

ປ່ຽນຮູບພາບເປັນສີຫີນ.

0% (0) ເປັນມູນຄ່າລະດັບຄົນປະຈຳຕົ້ນໄດ້, ສະແດງວ່າຮູບພາບຕົ້ນເຫຼົ່າ.

100% ຈະເຮັດໃຫ້ຮູບພາບກາຍເປັນສີຫີນປະຫຼາດຢ່າງສົມບູນ.

ສົນທະນາ:不允许负值。

技术细节

CSS 版本： CSS3

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0