دستور کار CSS invert()

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

CSS invert() فیلترهای تصویری برای برعکس کردن رنگ تصاویر استفاده می‌شوند.

• 100% (1) باعث می‌شود تصویر کاملاً برعکس شود
• 0% (0) هیچ اثری ندارد

مثال

مثال 1

برعکس کردن رنگ تصاویر:

#img1 {
  filter: invert(0.3);
}
#img2 {
  filter: invert(70%);
}
#img3 {
  filter: invert(100%);
}

آزمایش کنید

مثال 2

تغییر می‌دهد invert() با backdrop-filter استفاده از ویژگی‌ها با هم:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: invert(100%);
  backdrop-filter: invert(100%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

آزمایش کنید

زبان CSS

invert(مقدار)

جزئیات فنی

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

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

صفحات مرتبط

منابع:ویژگی filter CSS

منابع:دستور کار CSS blur()

منابع:دستور کار CSS brightness()

منابع:دستور کار CSS contrast()

منابع:دستور کار CSS drop-shadow()

منابع:دستور کار CSS grayscale()

منابع:دستور کار CSS hue-rotate()

منابع:دستور کار CSS opacity()

منابع:دستور کار CSS saturate()

منابع:توابع sepia() CSS