چگونه ایجاد شود: افکت تصویر اضافه کنید

یاد بگیرید که چگونه افکت‌های بصری به تصاویر اضافه کنید.

فیلترهای CSS

CSS filter این نوعیت به عنصر افکت‌های بصری اضافه می‌کند (مانند مبهم کردن و پراکندگی).

توجه:اینترنت اکسپلورر، ایج 12 یا سافاری 5.1 و نسخه‌های قدیمی‌تر آن پشتیبانی نمی‌کنند filter نوعیت.

مثال نورنگری

تمام رنگ‌های تصاویر را به سیاه و سفید تغییر دهید (100% خاکستری):

تصویر اصلی

نورنگری (100%)

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

آزمایش کنید

مثال مبهم کاری

تمام تصاویر را با افکت مبهم کردن کار کنید:

تصویر اصلی

مبهم کاری (5 پیکسل)

img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

آزمایش کنید

صفحات مرتبط

دستورالعمل‌ها:ویژگی فیلتر CSS