ویژگی filter CSS

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

ویژگی filter تعریف می‌کند اثرات ویژه‌ای (مانند تار و میزان پرتوبودن) برای عنصر (معمولاً <img>) را.

لطفاً به: مراجعه کنید

آموزش CSS:تصاویر CSS

دستورالعمل مرجع HTML DOM:ویژگی filter

مثال

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

img {
  filter: grayscale(100%);
}

آزمایش کنید

توجه:برای مشاهده مثال‌های بیشتر TIY به پایین صفحه بروید.

زبان CSS

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

توجه:برای استفاده از چندین فیلتر، هر فیلتر را با فاصله جدا کنید (مثلاً در مثال‌های بیشتر در پایین صفحه).

جزئیات فنی

مقدار پیش‌فرض: none
ارث: خیر
انیمیشن: پشتیبانی می‌شود. لطفاً به:خصوصیات مرتبط با انیمیشن。
نسخه: CSS3
نوع دستور زبان: object.style.filter="grayscale(100%)"

فیلتر عملگر:

توضیحات:از مقادیر درصدی (مثلاً 75٪) برای فیلتر استفاده کنید، همچنین این مقدار می‌تواند دهیقه باشد (مثلاً 0.75).

فیلتر: توضیح:
none پیش‌فرض. بدون اثر.
blur(px)

برای تصویر اثر تار اضافه کنید. مقدار بیشتر باعث ایجاد تار بیشتری می‌شود.

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

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

  • 0٪ باعث می‌شود تصویر کاملاً سیاه شود.
  • مقدار پیش‌فرض 100٪ است، که معادل تصویر اصلی است.
  • مقدارهای بیش از 100٪ باعث ایجاد نتایج روشن‌تر می‌شوند.
contrast(%)

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

  • 0٪ باعث می‌شود تصویر کاملاً سیاه شود.
  • مقدار پیش‌فرض 100٪ است، که معادل تصویر اصلی است.
  • مقدارهای بیش از 100٪ باعث ایجاد نتایج بیش از حد متمایز می‌شوند.
drop-shadow(h-shadow v-shadow blur spread color)

برای تصویر سایه اضافه کنید.

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

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

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

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

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

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

این مثال سایه قرمز ایجاد می‌کند، در جهت افقی و عمودی 8 پیکسل، با اثر تار 10 پیکسل:

filter: تاریک‌کننده(8px 8px 10px قرمز);

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

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

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

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

چرخش فاز رنگ را بر روی تصویر اعمال کنید. این مقدار درجه‌های مدار رنگ را تعیین می‌کند. مقدار پیش‌فرض 0درجه است که تصویر اصلی را نشان می‌دهد.

توضیحات:حداکثر 360درجه است.
invert(%)

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

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

توضیحات:مقدار منفی مجاز نیست.
opacity(%)

سطح شفافیت تصویر را تنظیم کنید. opacity-level سطح شفافیت را توصیف می‌کند که:

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

توضیحات:مقدار منفی مجاز نیست.

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

饱和دگی تصویر را تنظیم کنید.

  • 0% (0) تصویر را کاملاً ناپرنگ می‌کند.
  • 100% مقدار پیش‌فرض است و تصویر اصلی را نشان می‌دهد.
  • مقدارهای بیش از 100% نتایج بیش از حد پررنگ را فراهم می‌کند.

توضیحات:مقدار منفی مجاز نیست.
sepia(%)

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

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

توضیحات:مقدار منفی مجاز نیست.
url();

توابع url() مکان فایل XML فیلترهای SVG را تعیین می‌کند و می‌تواند شامل اشاره‌گر به عنصر خاص فیلتر باشد. مثال:

filter: url(svg-url#element-id);
initial این ویژگی را به مقدار پیش‌فرض تنظیم کنید. به دقت initial。
inherit این ویژگی را از عنصر پدرش ارث می‌برد. به دقت inherit。

مثال‌های بیشتر

مثال تار

تأثیر تار بر تصویر اضافه کنید:

img {
  filter: تار(5px);
}

آزمایش کنید

مثال تار 2

تصویر پس‌زمینه‌ای تار را اعمال کنید:

img.background {
  filter: تار(35px);
}

آزمایش کنید

مثال روشنایی

روشنایی تصویر را تنظیم کنید:

img {
  filter: روشن‌کننده(200%);
}

آزمایش کنید

مثال تناسبی

تنسانی تصویر را تنظیم کنید:

img {
  filter: تناسبی(200%);
}

آزمایش کنید

مثال سایه

تأثیر سایه بر تصویر:

img {
  filter: تاریک‌کننده(8px 8px 10px خاکستری);
}

آزمایش کنید

灰阶实例

将图像转换为灰阶：

img {
  filter: grayscale(50%);
}

آزمایش کنید

灰阶实例

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

img {
  filter: grayscale(50%);
}

آزمایش کنید

色相旋转实例

در تصویر از چرخش رنگ استفاده کنید:

img {
  filter: invert(100%);
}

آزمایش کنید

反转实例

تغییر نمونه‌های درون تصویر:

img {
  不透明度实例
}

آزمایش کنید

设置的图像的不透明度级别：

饱和度实例

img {
  filter: saturate(800%);
}

آزمایش کنید

مثال قهوه‌ای

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

img {
  filter: sepia(100%);
}

آزمایش کنید

استفاده از چندین فیلتر

برای استفاده از چندین فیلتر، هر کدام را با فاصله جدا کنید. توجه داشته باشید که ترتیب مهم است (مثلاً استفاده از grayscale() پس از sepia() منجر به تولید تصویر کاملاً سیاه و سفید می‌شود):

img {
  filter: contrast(200%) brightness(150%);
}

آزمایش کنید

همه فیلترها

نمایش همه عملکردهای فیلتر:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

آزمایش کنید

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

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

اعداد شماره‌ای که دارای -webkit- هستند، نشان‌دهنده نسخه اولیه‌ای هستند که از پیشوند استفاده می‌کنند.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

توضیحات:نسخه‌های قدیمی‌تر اینترنت اکسپلورر (4.0 تا 8.0) ویژگی غیراستاندارد "filter" را پشتیبانی می‌کنند. هنگامی که نیاز به پشتیبانی از نسخه‌های IE8 و پایین‌تر دارید، این ویژگی به طور کلی برای شفافیت استفاده می‌شود.