ປະກາດຈຸດການກີດ CSS

  • ການໄປຫາການເບິ່ງກ່ອນ empty-cells
  • 下一页 flex

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

ລັກສະນະ filter ອະທິບາຍວິວັດທະນາການທາງສັນຍາວັດຂອງປະກອບ (ສະເພາະ <img>) (ເຊັ່ນ ການສະຫຼາດແລະຄວາມສົມມຸດ).

ບໍ່ວ່າຈະມີ:

ການສອນ CSSຮູບພາບ CSS

ການອະທິບາຍ HTML DOMລັກສະນະ filter

ຄວາມຄິດທີ່ຕ້ອງການ

ເຮັດໃຫ້ຮູບທັງໝົດກາຍເປັນສີສີຫຼັງ (100% ສີຫຼັງ):

img {
  filter: grayscale(100%);
}

ທ້າທາຍຕົວເອງ

ຄຳແນະນຳ:ພົບຫຼາຍຄວາມຄິດທີ່ຕ້ອງການຢູ່ດ້ານກ້າວຢູ່ຕໍ່າສູບ.

ສັບສິນ CSS

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

ຄຳແນະນຳ:如需使用多个滤镜，请用空格分隔每个滤镜（参见页面下方的更多实例）。

技术细节

默认值： none
继承： 否
动画制作： 支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.filter="grayscale(100%)"

滤镜函数

ຄວາມເຫັນ:使用百分比值（例如 75％）的滤镜，也接受该值是十进制（例如 0.75）。

滤镜 描述
none 默认值。规定无效果。
blur(px)

对图像应用模糊效果。较大的值将产生更多的模糊。

如果为指定值，则使用 0。
brightness(%)

ການດັດແປງຄວາມສະຫຼາດຂອງພາບ.

  • 0% ຈະເຮັດໃຫ້ພາບບາງສີສີນໍ້າຫົວສີຂີ້ນີ້ຫົກຫຼາຍ.
  • ຄວາມຍາວທີ່ມີມອດດີສີບວັດຖຸດີນີ້ 100%.
  • ຄວາມຍາວທີ່ຫຼາຍກວ່າ 100% ຈະໃຫ້ຜົນມີຄວາມສະຫຼາດຫຼາຍຂື້ນ.
contrast(%)

ການດັດແປງຄວາມສະຫຼາດຂອງພາບ.

  • 0% ຈະເຮັດໃຫ້ພາບບາງສີສີນໍ້າຫົວສີຂີ້ນີ້ຫົກຫຼາຍ.
  • ຄວາມຍາວທີ່ມີມອດດີສີບວັດຖຸດີນີ້ 100%.
  • ຄວາມຍາວທີ່ຫຼາຍກວ່າ 100% ຈະໃຫ້ຜົນມີຄວາມສະຫຼາດຫຼາຍຂື້ນ.
drop-shadow(h-shadow v-shadow blur spread color)

ການສ້າງພາບບາງສີສີນໍ້າຫົວສີຂີ້ນີ້.

ຄວາມຍາວທີ່ສາມາດໃຊ້:

  • h-shadow - ຄວາມຄຳວ່າຈະຄົງ. ສະແດງຄວາມຍາວຂອງສີສີນໍ້າຫົວສີຂີ້ນີ້ທີ່ຍາວ. ຄວາມຍາວທີ່ຍັງຈະເຮັດໃຫ້ສີສີນໍ້າຫົວສີຂີ້ນີ້ຢູ່ເທິງຂ້າງຂວາຂອງພາບ.
  • v-shadow - ຄວາມຄຳວ່າຈະຄົງ. ສະແດງຄວາມຍາວຂອງສີສີນໍ້າຫົວສີຂີ້ນີ້ຕໍ່າ. ຄວາມຍາວທີ່ຍັງຈະເຮັດໃຫ້ສີສີນໍ້າຫົວສີຂີ້ນີ້ຢູ່ເທິງພາບ.

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

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

ຄວາມເຫັນ:Chrome, Safari ແລະ Opera, ອາດຈະມີບັນນາທິການອື່ນໆ, ບໍ່ສາມາດກວດສອບຄວາມຍາວທີ 4; ຖ້າກວດສອບ ຈະບໍ່ສະແດງ.

color - ຄວາມຄຳວ່າຈະຄົງ. ສີຂອງສີສີນໍ້າຫົວສີຂີ້ນີ້ດີສີບວັດຖຸດີນີ້. ຖ້າບໍ່ມີການປະກາດຫຍັງ ສີຈະຕົກຕາມບານຄອມພິວເຕີມ (ປົກກະຕິແມ່ນສີສີນໍ້າຫົວສີຂີ້ນີ້).

ຄວາມຍັງສ້າງພາບສີສີນໍ້າຫົວສີຂີ້ນີ້ດີສີບວັດຖຸດີນີ້ 8px ແລະ ການປົກຜັງບາງ 10px:

filter: drop-shadow(8px 8px 10px red);

ຄຳແນະນຳ:这个滤镜类似 box-shadow 属性。
grayscale(%);

ການປ່ຽນພາບເປັນສີສີຫວັດ.

  • 0% (0) ແມ່ນຄາດຄະແນນສະຫຼົກໂດຍກົງ.
  • 100％ ຈະເຮັດໃຫ້ພາບປອດໄພຢ່າງເຕັມພາບ (ສຳລັບພາບສີສີຫວັດ).

ຄວາມເຫັນ:ບໍ່ອະນຸຍາດມີຄວາມຍັງດັງ.
hue-rotate(deg);

ການສະແດງສີສັນຊາດຂອງພາບ. ຄຳຕາມວ່ານັ້ນ ຈະອະທິບາຍຄວາມກຳລັງສະແດງສີສັນຊາດຂອງພາບ. ຄຳຕາມວ່ານັ້ນ ຈະເປັນ 0deg, ເປັນພາບພາວະເດີມ.

ຄວາມເຫັນ:ຄວາມຍັງດັງຫຼາຍກວມ 360deg.
invert(%);

ການປ່ຽນພາບຂອງຕົວຈາກພາບພາວະເດີມ.

  • 0% (0) ແມ່ນຄາດຄະແນນສະຫຼົກໂດຍກົງ.
  • 100％ ຈະເຮັດໃຫ້ພາບປອດໄພຢ່າງເຕັມພາບ.

ຄວາມເຫັນ:ບໍ່ອະນຸຍາດມີຄວາມຍັງດັງ.
opacity(%);

ການຕັ້ງລະດັບຄວາມປອດໄພຂອງພາບ. opacity-level ອະທິບາຍລະດັບຄວາມປອດໄພ, ທີ່:

  • 0% ແມ່ນບໍ່ປອດໄພຢ່າງເຕັມພາບ.
  • 100% (1) ແມ່ນຄາດຄະແນນສະຫຼົກໂດຍກົງ ແລະສະແດງພາບພາວະເດີມ (ບໍ່ປອດໄພ).

ຄວາມເຫັນ:ບໍ່ອະນຸຍາດມີຄວາມຍັງດັງ.

ຄຳແນະນຳ:ບົດບາດຂອງພາບພາວະຂຶ້ນຄືກັບບົດບາດ opacity.
saturate(%);

ການຕັ້ງຄວາມສຳຄັນຂອງພາບ.

  • 0% (0) ຈະເຮັດໃຫ້ພາບບໍ່ມີຄວາມສຳຄັນ.
  • 100% ແມ່ນຄາດຄະແນນສະຫຼົກໂດຍກົງ ແລະສະແດງພາບພາວະເດີມ.
  • ຄວາມຍັງດັງຫຼາຍກວມ 100% ຈະເຮັດໃຫ້ມີຜົນຂະຫຍາຍຄວາມສຳຄັນ.

ຄວາມເຫັນ:ບໍ່ອະນຸຍາດມີຄວາມຍັງດັງ.
sepia(%);

ການປ່ຽນພາບເປັນສີຫວັດນີ້.

  • 0% (0) ແມ່ນຄາດຄະແນນສະຫຼົກໂດຍກົງ.
  • 100％ ຈະເຮັດໃຫ້ພາບກາຍເປັນສີຫວັດນີ້ຢ່າງເຕັມພາບ.

ຄວາມເຫັນ:ບໍ່ອະນຸຍາດມີຄວາມຍັງດັງ.
url();

ນັດ url() ຍັງມີຄວາມຄິດວ່າທີ່ຢູ່ຂອງ XML ບົດບາດ SVG ການບັນທືກ SVG ແລະສາມາດກວມເອົາອີງຕາມສິ່ງທີ່ພິເສດ. ບັນຍາວ:

filter: url(svg-url#element-id);
initial ຕັ້ງຄວາມພາບພາວະປະກອບພູມພາບໃຫ້ເປັນຄາດຄະແນນສະຫຼົກ. ບັນຍາວ: initial。
inherit ຂະຫຍາຍຈາກປະກອບພູມພາບພາຍໃນປະກອບພູມພາບແຫຼວ. ບັນຍາວ: inherit。

ຄວາມຫຼັກຫຼາຍອື່ນໆ:

ຄວາມຫຼັກຫຼາຍການບັນທືກພາບຂີ້ງ:

ການເພີ່ມພາບພາວະທີ່ບັງບາງ:

img {
  filter: blur(5px);
}

ທ້າທາຍຕົວເອງ

ຄວາມຫຼັກຫຼາຍການບັນທືກພາບຂີ້ງ 2:

ສະແດງພາບພາວະທີ່ບັງບາງ:

img.background {
  filter: blur(35px);
}

ທ້າທາຍຕົວເອງ

ຄວາມເຊື່ອມການບັນທືກພາບຂີ້ງ:

ການປ່ຽນດັດຄວາມເຊື່ອມຂອງພາບພາວະ:

img {
  filter: brightness(200%);
}

ທ້າທາຍຕົວເອງ

ຄວາມຫຼັກຫຼາຍການບັນທືກພາບຂີ້ງ:

ການປ່ຽນດັດສະພາບຂອງພາບພາວະ:

img {
  filter: contrast(200%);
}

ທ້າທາຍຕົວເອງ

ຄວາມຫຼັກຫຼາຍການບັນທືກພາບຂີ້ງ:

ສະແດງພາບພາບການບັນທືກຂອງຕາມກຳລັງ:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

ທ້າທາຍຕົວເອງ

ຕົວຢ່າງຂອງສີຫຼາຍ

ການປ່ຽນພາບເປັນສີຫຼາຍ:

img {
  filter: grayscale(50%);
}

ທ້າທາຍຕົວເອງ

ຕົວຢ່າງຂອງດັດແປງສີສັນລະສັບ

ການນຳໃຊ້ການດັດແປງສີສັນລະສັບ:

img {
  filter: hue-rotate(90deg);
}

ທ້າທາຍຕົວເອງ

ຕົວຢ່າງຂອງລົບ

ການລົບຂອງພາບ:

img {
  filter: invert(100%);
}

ທ້າທາຍຕົວເອງ

ຕົວຢ່າງຂອງຄວາມບາງ

ການຕັ້ງລະດັບຄວາມບາງຂອງພາບ:

img {
  filter: opacity(30%);
}

ທ້າທາຍຕົວເອງ

ຕົວຢ່າງຂອງຄວາມຫຼາກຫຼາຍ

ການດັດແປງຄວາມຫຼາກຫຼາຍຂອງພາບ:

img {
  filter: saturate(800%);
}

ທ້າທາຍຕົວເອງ

ຕົວຢ່າງຂອງເພີບສີນໍ້າຕານ

ການປ່ຽນພາບເປັນເພີບສີນໍ້າຕານ:

img {
  filter: sepia(100%);
}

ທ້າທາຍຕົວເອງ

ການໃຊ້ຕົວເລກຄວາມປະພຶດຫຼາຍອັນ

ເພື່ອໃຊ້ຕົວເລກຄວາມປະພຶດຫຼາຍອັນ, ກຳລັງຕາມລະບົບດ້ວຍຈຳນວນ. ເບິ່ງຫຼັງຈາກ sepia() ການໃຊ້ grayscale() ຈະສ້າງພາບສີຫຼາຍສີຫຼາຍ:

img {
  filter: contrast(200%) brightness(150%);
}

ທ້າທາຍຕົວເອງ

ຕົວເລກຄວາມປະພຶດທັງໝົດ

ການສະແດງທັງໝົດຂອງຕົວເລກຄວາມປະພຶດ:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

ທ້າທາຍຕົວເອງ

ການສະໜັບສະໜູນອິນເຕີເນັດ

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

ຈຳນວນທີ່ມີ -webkit- ໃນຕົວເລກຈະສະແດງວ່ານັ້ນເປັນສະບັບອິດສະຫຼະທຳທໍາອິດທີ່ໃຊ້ການເພີ່ມກົວ.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

ຄວາມເຫັນ:ສະບັບອິນເຕີເນັດອີກຄັ້ງໃຫຍ່ (4.0 ຫາ 8.0) ສະໜັບສະໜູນລະບົບປະສົມທີ່ບໍ່ເປັນມາດຕະຖານ "filter". ເມື່ອຕ້ອງການສະໜັບສະໜູນ IE8 ແລະຫຼັງຈາກນັ້ນ, ສຳລັບການໃຊ້ຄວາມສະຫຼາກ.

  • ການໄປຫາການເບິ່ງກ່ອນ empty-cells
  • 下一页 flex