فونكشن blur() لـ CSS

التعريف والاستخدام

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

مراجعه:فونكشن contrast() لـ CSS

مراجعه:فونكشن drop-shadow() لـ CSS

مراجعه:فونكشن grayscale() لـ CSS

مراجعه:فونكشن hue-rotate() لـ CSS

مراجعه:فونكشن invert() لـ CSS

مراجعه:فونكشن opacity() لـ CSS

مراجعه:函数 saturate() CSS

مراجعه:函数 sepia() CSS