وظيفة 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

المرجع:دالة brightness() CSS

المرجع:وظيفة CSS contrast()

المرجع:وظيفة CSS drop-shadow()

المرجع:وظيفة CSS grayscale()

المرجع:وظيفة CSS hue-rotate()

المرجع:وظيفة CSS invert()

المرجع:وظيفة CSS opacity()

المرجع:دالة saturate() CSS

المرجع:دالة sepia() CSS