CSS blur() ຫົວຂໍ້

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

CSS blur() ຫົວຂໍ້ຕົວເລື່ອງ blur() ສະໜັບສະໜູນຫົວຂໍ້ນີ້ທີ່ມີບໍລິການ. ຈຳນວນຫຼາຍກວ່າຈະເຮັດໃຫ້ຜົນກະທົບວົງວຽນຫຼາຍຂື້ນ.

ຖ້າບໍ່ມີການກຳນົດຄູ່ມືແມ່ນຈະໃຊ້ຈຳນວນສະເພາະ 0.

ຄວາມສະແດງ

ຄວາມສະແດງ 1

ນຳໃຊ້ຜົນກະທົບວົງວຽນທີ່ຕ່າງກັນສຳລັບປະກອບ <h1> ແລະ <img>:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

ທຳການທົດສອບທັນອີກ

ຄວາມສະແດງ 2

ສ້າງບໍລິການການວົງວຽນຫຼັງ:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

ທຳການທົດສອບທັນອີກ

CSS ສັນຍາວິທະຍາ

blur(radius)

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

ການສະໜັບສະໜູນບັນດາສາຍພາດ

ຈຳນວນໃນຕາລະບັນດາມັນຈະສະແດງວ່າ ບັນດາສາຍພາດທີ່ສະໜັບສະໜູນຫົວຂໍ້ນີ້ຢ່າງເຕັມທີ່ສຸດ

ບັນດາໜ້າທີ່ກ່ຽວຂ້ອງ

参考：CSS ఫిల్టర్ అట్రిబ్యూట్

参考：CSS బ్రైట్నెస్() ఫంక్షన్

参考：CSS contrast() ຫົວຂໍ້

参考：CSS drop-shadow() ຫົວຂໍ້

参考：CSS grayscale() ຫົວຂໍ້

参考：CSS hue-rotate() ຫົວຂໍ້

参考：CSS invert() ຫົວຂໍ້

参考：CSS opacity() ຫົວຂໍ້

参考：CSS saturate() 函数

参考：CSS sepia() 函数