چگونه ایجاد شود: افزودن اثر تصویر

آموزش نحوه افزودن اثرات ویژه به تصاویر.

فیلترهای CSS

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

توجه:Internet Explorer، Edge 12 یا Safari 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