ຫົວຂໍ້ຫົວໜ້າ CSS blur()

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

CSS 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 filter

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

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

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

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

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

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

ກ່ຽວກັບ:ຫົວຂໍ້ຫົວໜ້າ CSS opacity()

ກ່ຽວກັບ:ຫົວຫຼັກ CSS saturate()

ກ່ຽວກັບ:ຫົວຫຼັກ CSS sepia()