تبدیل تصویر به grayscale با کمک css
اگر در حال کار با css هستید و میخواهید یک تصویر را grayscale کنید.
تبدیل تصویر به grayscale با کمک css
برای تبدیل تصویر به grayscale در css از این کد استفاده کنید:
.grayscale {
filter: grayscale(100%);
}
نکته: حالا از کلاس grayscale در هر تصویری که میخواهید استفاده کنید و آنها را به grayscale تبدیل کنید.
اگر نیاز به آموزشهای بیشتری در css دارید در بخش نظرات همین نوشته برای ما بنویسید.
برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]


















این فیلتر روی سرعت لود صفحه تاثیری داره؟
فیلتر grayscale معمولاً تأثیر قابل توجهی بر سرعت لود صفحه ندارد، اما در صورت استفاده زیاد و بر روی تصاویر حجیم ممکن است کمی تأثیرگذار باشد.
grayscale باعث افت کیفیت تصویر میشه؟
سلام! فیلتر grayscale در CSS به طور مستقیم باعث افت کیفیت تصویر نمیشود، بلکه فقط رنگها را حذف میکند و تصویر را سیاه و سفید نمایش میدهد.
این روش روی تصاویر background هم کار می کنه؟
بله، این روش روی تصاویر پسزمینه (background) نیز کار میکند. کافیست فیلتر را به صورت inline یا در یک کلاس CSS که به عنصر حاوی تصویر پسزمینه اعمال میشود، اضافه کنید.
میشه فقط بخشی از تصویر رو grayscale کرد؟
سلام، بله با استفاده از تکنیکهای پیشرفتهتر CSS مانند ماسک کردن یا استفاده از SVG میتوان بخشهایی از تصویر را grayscale کرد.
میشه این grayscale رو با transition ترکیب کنیم تا انیمیشن داشته باشه؟
بله، حتماً. با ترکیب filter: grayscale() با transition میتوانید انیمیشن زیبایی برای تبدیل تصویر به grayscale ایجاد کنید.