فنکشن 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 فیلٹر کا پارامتر

مطابقت:CSS brightness() فنکشن

مطابقت:CSS contrast() فنکشن

مطابقت:CSS drop-shadow() فنکشن

مطابقت:CSS grayscale() فنکشن

مطابقت:CSS hue-rotate() فنکشن

مطابقت:CSS invert() فنکشن

مطابقت:CSS opacity() فنکشن

مطابقت:CSS saturate() فنکشن

مطابقت:CSS sepia() فنکشن