توابع sepia() در CSS

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

توابع sepia() در CSS sepia() توابع فیلتر تصویر را به رنگ قهوه‌ای تبدیل می‌کند (یک رنگ گرم‌تر و قهوه‌ای/زردتر).

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

مثال

مثال 1

تنظیم اثرات قهوه‌ای مختلف برای تصاویر:

#img1 {
  filter: sepia(1);
}
#img2 {
  filter: sepia(60%);
}
#img3 {
  filter: sepia(0.4);
}

آزمایش کنید

مثال 2

این sepia() با backdrop-filter استفاده ترکیبی از ویژگی‌ها:

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

آزمایش کنید

نحوه نوشتن CSS

sepia(amount)
مقدار توضیح
amount

اختیاری. مقدار قهوه‌ای را مشخص کنید، می‌تواند عدد یا درصد باشد.

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

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

جزئیات فنی

نسخه: مستند CSS Filter Effects Module Level 1

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

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

صفحات مرتبط

منابع:خصوصیت filter CSS

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

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

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

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

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

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

منابع:توابع invert() در CSS

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

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