ویژگی فیلتر استایل

تعریف و استفاده

فیلتر ویژگی برای افزودن تأثیرات ویژه به تصاویر (مانند محو و ساتراسیون) است.

لطفاً به:

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

مثال

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

document.getElementById("myImg").style.filter = "grayscale(100%)";

آزمایش کنید

نحوه استفاده

بازگشت ویژگی فیلتر:

شیء.style.filter

تنظیم کردن ویژگی فیلتر:

شیء.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

توابع فیلتر

نکته:فیلتر با استفاده از مقادیر درصدی (مثلاً 75%) نیز مقادیر اکسیادی (مثلاً 0.75) را می‌پذیرد.

فیلتر توضیح
هیچ‌یک بدون اثر تعیین شده است.
blur(پیکسل)

تأثيرات محو روی تصاویر اعمال می‌شود. مقادیر بزرگتر باعث محو بیشتر می‌شوند.

اگر مقدار مشخص نشده باشد، از 0 استفاده می‌شود.
brightness(%)

亮度 تصویر را تنظیم کنید.

0% باعث می‌شود تصویر کاملاً سیاه شود.

100% (1) مقدار پیش‌فرض است، که تصویر اصلی را نشان می‌دهد.

ارزش‌های بالاتر از 100% نتایجی روشن‌تر ارائه می‌دهند.
contrast(%)

مقایسه تصویر را تنظیم کنید.

0% باعث می‌شود تصویر کاملاً سیاه شود.

100% (1) مقدار پیش‌فرض است، که تصویر اصلی را نشان می‌دهد.

ارزش‌های بالاتر از 100% نتایجی با کمتر از مقایسه ارائه می‌دهند.
drop-shadow(h-shadow v-shadow blur spread color)

برای تصویر اثر پروژه‌گذاری اعمال کنید.

مقدارهای ممکن:

h-shadow لازم. مقدار پیکسلی سایه افقی را مشخص می‌کند. مقدار منفی باعث قرارگیری سایه در سمت چپ تصویر می‌شود.

v-shadow لازم. مقدار پیکسلی سایه عمودی را مشخص می‌کند. مقدار منفی باعث قرارگیری سایه در بالای تصویر می‌شود.

blur اختیاری. سومین مقدار، باید به واحد پیکسل باشد. برای سایه‌ها اثر تار را اضافه می‌کند. مقدار بزرگتر باعث تارتر و روشن‌تر شدن سایه می‌شود. مقدار منفی مجاز نیست. اگر مشخص نشود، مقدار 0 استفاده خواهد شد (لبه‌های سایه تیز هستند).

spread اختیاری. چهارمین مقدار، باید به واحد پیکسل باشد. مقدار مثبت باعث بزرگتر و بزرگ‌تر شدن سایه می‌شود، مقدار منفی باعث کوچک‌تر شدن سایه می‌شود. اگر مشخص نشود، مقدار 0 خواهد بود (سایه با اندازه عنصر مشابه خواهد بود).

نکته:Chrome، Safari و Opera، ممکن است مرورگرهای دیگر نیز باشد، از چهارمین طول پشتیبانی نمی‌کنند؛ اگر اضافه شوند، نمایش داده نمی‌شوند.

colorاختیاری. برای سایه‌ها رنگ اضافه کنید. اگر مشخص نشود، رنگ بستگی به مرورگر دارد (معمولاً سیاه).

توجه:این فیلتر مشابه با ویژگی box-shadow است.
grayscale(%)

تصویر را به حالت خاکستری تبدیل کنید.

0% (0) مقدار پیش‌فرض است، که تصویر اصلی را نشان می‌دهد.

100% باعث می‌شود تصویر کاملاً سیاه و سفید شود (برای تصاویر سیاه و سفید استفاده می‌شود).

نکته:مقدار منفی مجاز نیست.
hue-rotate(deg)

در تصویر رنگ‌های اصلی را چرخش دهید. این مقدار تعیین می‌کند که مثال‌های تصویر چگونه به دور دایره رنگ‌ها تنظیم می‌شوند.

0deg مقدار پیش‌فرض است، که تصویر اصلی را نشان می‌دهد.

نکته:حداکثر مقدار 360 درجه است.
invert(%)

مثال‌های موجود در تصویر را برعکس کنید.

0% (0) مقدار پیش‌فرض است، که تصویر اصلی را نشان می‌دهد.

100% باعث می‌شود تصویر کاملاً برعکس شود.

نکته:مقدار منفی مجاز نیست.
opacity(%)

سطح شفافیت تصویر را تنظیم کنید. سطح شفافیت توضیح می‌دهد که شفافیت درجه‌بندی شده، که در آن:

0% کاملاً شفاف است.

100% (1) مقدار پیش‌فرض است، که تصویر اصلی (بدون شفافیت) را نشان می‌دهد.

نکته:مقدار منفی مجاز نیست.

توجه:این فیلتر مشابه با ویژگی opacity است.
saturate(%)

درجه بندی میزان پررنگی تصویر را تنظیم کنید.

0% (0) باعث می‌شود تصویر کاملاً ناشناس شود.

100% مقدار پیش‌فرض است، که تصویر اصلی را نشان می‌دهد.

ارزش‌های بالاتر از 100% نتایجی بیش از حد پررنگ ارائه می‌دهند.

نکته:مقدار منفی مجاز نیست.
sepia(%)

تصویر را به قهوه‌ای تبدیل کنید.

0% (0) مقدار پیش‌فرض است، که تصویر اصلی را نشان می‌دهد.

100% باعث می‌شود تصویر به طور کامل به قهوه‌ای تبدیل شود.

نکته:مقدار منفی مجاز نیست.

جزئیات فنی

نسخه CSS: CSS3

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌ای اولیه از مرورگر است که این ویژگی را پشتیبانی می‌کند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0